1

Есть такой resolve:

export class PermissionResolver implements Resolve<any> {
     constructor(private authService: AuthorizationService, private permissionService: PermissionService) { }

     resolve(
          route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot
     ): Observable<any> | Promise<any> | any {
          return this.authService.authorize().pipe(tap(() => {
               this.permissionService.currentUser = this.authService.currentUser;
          }));
     }
}

Подцеплен к маршруту так:

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, pathMatch: 'full', resolve: { data: PermissionResolver }
  }
];

Так вот меня беспокоит следующее:

1) Когда точка останова оставливается тут this.permissionService.currentUser=this.authService.currentUser, то консоль уже пестрит ошибками об undefined, так как currentUser используется в биндинге и меню сайта так же отображается.

Если верить документации, то страница не должна грузится пока не отработает resolve.

2)Этот сервис биндится в компоненте:

<li class="nav-item"><a class="nav-link" [ngClass]="{'disabled':!permissionService.canView()}"

, как я уже говорил, консоль пестрит ошибками. А когда ошибки проходят, то в консоли отображается 10-ок сообщений об успешном вызове метода(я логирую этот метод).

Почему так происходит?

iluxa1810
  • 24,899
  • у тебя просто проблемы с асинхронностью, я видел ты делаешь подписки там где не надо еще в предыдущих вопросах, так что может быть из-за этого :) если плохо понимаешь конструкции rxjs то конвертируй потоки в промис через toPromise и работай уже с async/await – arturovt May 14 '19 at 17:44
  • @overthesanity да не, я взял код, который ты мне привел в примере. Я так же перепроверил все места, где может дергаться данный метод и он дергается только в этом компоненте => я не понимаю, почему так происходит=( – iluxa1810 May 14 '19 at 17:46
  • а этот li находится в HomeComponent? – arturovt May 14 '19 at 17:53
  • @overthesanity, ну как сказать... HomeComponent состоит из 2-ух компонентов: nav-menu и router-outlet – iluxa1810 May 14 '19 at 18:14
  • @overthesanity, а сам li находится в компоненте nav-menu. Никаких подписок нету кроме ресолвера. – iluxa1810 May 14 '19 at 18:50
  • мне сложно так сказать, сделай пример на stackblitz с логикой похожей на твою – arturovt May 14 '19 at 18:52
  • @overthesanity, стоп стоп стоп. Я немного наврал. Менюха находится внутри app.component. Это не может быть причиной того, что она грузится до резолва? – iluxa1810 May 15 '19 at 07:28
  • да, это и есть причина – arturovt May 15 '19 at 07:54
  • @overthesanity т.е в app.component оставить только router-outlet, а менюху переместить в контейнер, где будет и router-outlet ? – iluxa1810 May 15 '19 at 08:03
  • да, то что я написал выше сработало и теперь нету ругани на неопределенность. – iluxa1810 May 15 '19 at 08:58
  • @overthesanity, похоже, что мультивызов привязок-это нормально https://stackoverflow.com/a/26993212/4244707 – iluxa1810 May 15 '19 at 09:17

  • что мультивызов привязок-это нормально - я думал вопрос о резолверах ))

     – arturovt May 15 '19 at 17:49

1 Answers1

0

1)С горем по полам, выяснил, что проблема была связана с тем, что менюха находилась в app.component=> грузилась до всех резолверов...

Я вынес этот код:

<div class='container-fluid'>
  <div class="sticky-top">
    <app-nav-menu></app-nav-menu>
  </div>
  <div class="body-content">
    <router-outlet></router-outlet>
  </div>
</div>

В отдельный компонент, допустим base.component, а в app.component оставил только router-outlet.

Далее я переписал маршруты так:

Корневой модуль:

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, pathMatch: 'full', resolve: { data: PermissionResolver }
  }
];

HomeComponent:

    const homeRoutes: Routes = [
      {
        path: 'home', component: AssemblyContainerComponent, children: [
          {
            path: '', component: AssemblyHomeComponent
          },
//какие-то дочерние маршруты

AboutComponent:

    const aboutRoutes: Routes = [
      {
        path: 'about', component: aboutComponent
      }
    ];
//какие-то дочерние маршруты

В

const appRoutes: Routes = [
  {
    path: '', component: BaseComponent, resolve: { data: PermissionResolver }, children: [
      {
        path: '', loadChildren: './area/Home/Home.module#HomeModule',
      },
      {
        path: 'about', loadChildren: './area/about/about.module#aboutModule',
      }
    ]
  }
];

HomeComponent:

    const homeRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
      {
        path: 'home', component: HomeContainerComponent, children: [
          {
            path: '', component: AssemblyHomeComponent
          },
//какие-то дочерние маршруты

AboutComponent:

    const aboutRoutes: Routes = [
      {
        path: '', component: aboutComponent
      }
    ];
//какие-то дочерние маршруты

P.S Пните в комментах, если это делается как-то по другому.

2)Если верить вот этому ответу на enSO, то это нормально, так как Angular использует "грязную" проверку, что бы синхронизировать изменения.

iluxa1810
  • 24,899