Глобальный счетчик не отображается с событиями маршрутизации - PullRequest
Новая
       15

Глобальный счетчик не отображается с событиями маршрутизации

1 голос
/ 11 июля 2020

У меня есть этот код в моем компоненте приложения HTML

<mat-progress-spinner *ngIf="loading"></mat-progress-spinner>
<router-outlet></router-outlet>

И TS 

export class AppComponent {
  loading: boolean;
  constructor(private router: Router) {
    this.router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent)
    })
  }
  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
      console.log(this.loading)
    }
    if (routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationError) {
      this.loading = false
      console.log(this.loading)

    }

  }
}

Я изучил эту технику с видео Деборы Курата . Но я никогда не вижу счетчика, и у меня в приложении много изображений при загрузке страницы. Что я делаю не так? Есть идеи?

РЕДАКТИРОВАТЬ: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})

С onPu sh changedetection изображения не отображаются, поэтому я как бы потерялся здесь ...

РЕДАКТИРОВАТЬ:

Маршрутизация приложений: 

    //const adminModule = ()=> import('./admin/admin.module').then(m=>m.AdminModule);
    
    const routes: Routes = [
      {
        path: '', component:ShellComponent,
        children: [
          {path: 'home', component: HomeComponent, canActivate:[AuthGuardService] },
          //{path: 'admin', loadChildren: adminModule},
          {path: 'detail/:id', component: DetailComponent, },
    
          {path: '', redirectTo:'home', pathMatch:'full'},
          {path: 'table', component:ListBooksComponent},
          {path: 'selection', component: SelectionComponent, },
  {path:'edit/:id', component:RegisterComponent, canDeactivate:[EditGuardService]},

    
        ]
      },
      {path: 'login', component: LoginComponent},
      {path:'edit/:id', component:RegisterComponent},
      {path:'register', component: RegisterComponent}
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

1 Ответ

1 голос
/ 11 июля 2020

Прежде всего, загрузка изображений не остановит навигацию и не является частью жизненного цикла навигации.

Вы случайно не используете ChangeDetectionStrategy.OnPush в своем компоненте приложения? Если да, то один из способов сделать это - сделать это Observable. В любом случае это более чистое решение: 

<mat-progress-spinner *ngIf="loading$ | async"></mat-progress-spinner>
<router-outlet></router-outlet>

export class AppComponent {
  readonly loading$: Observable<boolean> = this.router.events.pipe(
    map((event) => this.checkRouterEvent(event))
  );

  constructor(private router: Router) {}

  checkRouterEvent(routerEvent: Event): boolean {
    if (routerEvent instanceof NavigationStart) {
      return true;
    }

    if (routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationError) {
      return false;
    }
  }
}

Однако имейте в виду, что единственный способ, которым вы сможете действительно увидеть счетчик, - это если маршрутизатору нужно выполнить некоторую обработку / защиту / загрузку. Что в основном означает:

  1. Разрешение: это преобразователи , объявленные на пути, по которому вы переходите. Если это asyn c, например http-вызовы, ваш счетчик будет отображаться на время разрешения

  2. Защита: это CanActivate, CanActivateChild, CanLoad и менее известные CanDeactivate охранники в вашей конфигурации маршрута. То же самое здесь, если это asyn c, будет счетчик

  3. Loading: это отложенная загрузка ваших функциональных модулей. Это путь, определенный конфигурацией loadChildren. Пока приложение запрашивает модуль, оно будет задерживать маршрутизатор, пока он загружается

Если в вашей конфигурации маршрута нет ни одной из этих трех вещей или они не асинхронны c, прядильщика не увидишь

...