全局微调器不显示路由事件

Question

我的应用组件 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)

    }

  }
}

我通过 Deborah Kurata 的 video 学习了这项技术。但是我从来没有看到微调器，加载页面时我的应用程序中有很多图像。我究竟做错了什么？有什么想法吗？

编辑：

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

})

使用 onPush 更改检测，图像不会出现，所以我有点迷失在这里......

编辑：

应用路由：

    //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 { }

Answer 1

首先，图像的加载不会停止导航，也不是导航生命周期的一部分。

您是否有机会在您的应用组件中使用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. 正在解决：这些是在您要导航的路径上声明的 resolvers。如果这些是异步的，例如 http 调用，您的微调器将在解析期间显示

2. Guarding：这些是您的路由配置中的CanActivate、CanActivateChild、CanLoad 和鲜为人知的CanDeactivate 守卫。这里的计数相同，如果这些是异步的，就会有一个微调器

3. 正在加载：这是您的功能模块的lazy loading。这是使用loadChildren 配置定义的路径。当应用程序请求模块时，只要它正在加载，它就会延迟路由器

如果你的路由配置没有这三样东西，或者它们不是异步的，你将看不到微调器