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

我的应用程序组件HTML中有此代码

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

我和Deborah Kurata一起学习了这项技术。但我从来没有看到过旋转器，在加载页面时，我的应用程序中有很多图像。我做错了什么？有什么想法吗

编辑：

使用onPush 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 { }

---

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

您是否碰巧在应用程序组件中使用了

ChangeDetectionStrategy.OnPush

？如果是这样的话，一种方法就是让它成为一个可观察的

。哪种解决方案更清洁：

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



导出类AppComponent{
只读加载$：可观=this.router.events.pipe(
映射（（事件）=>this.checkRouterEvent（事件））
);
构造函数（专用路由器：路由器）{}
checkRouterEvent（routerEvent:Event）：布尔值{
if（导航启动的路由事件实例）{
返回true；
}
如果（路由事件实例）导航取消||
导航结束的路由事件实例||
路由事件实例（导航错误）{
返回false；
}
}
}


但是，请记住，如果路由器有一些解析/保护/加载工作要做，那么您将能够实际看到微调器的唯一方法。这基本上意味着：

解析：这些在您导航到的路径上声明。如果这些是异步的，比如http调用，那么在解析过程中会显示微调器


守卫：这些是在你的路线配置上的，和鲜为人知的守卫。这里的计数相同，如果这些是异步的，则将有一个微调器


加载：这是您的功能模块的第一步。这是使用配置文件定义的路径。当应用程序请求模块时，它将延迟路由器加载的时间


如果您的route config没有这三项功能中的任何一项，或者它们不是异步的，您将不会看到微调器
首先，图像加载不会停止导航，并且不属于导航生命周期的一部分。您是否在应用程序组件中使用了
ChangeDetectionStrategy.OnPush
？不，我使用的是默认的，但我可以尝试您的建议OK，谢谢您的完整答案，我会尝试使用您的代码返回（我将其替换为我的代码）。我收到以下错误：
类型“Observable”不可分配给类型“Observable”。类型“void”不能分配给类型“boolean”
我也理解视频中的逻辑，但我的实现没有work@Mellville我错误地复制了您的
checkRouterEvent
。我没有更改此方法的返回类型。我已经更新了我的答案。你确定你有我在你的路线配置中提到的三件事中的任何一件吗。你能发布你的路线配置吗？另外，您是否可以通过
测试
或不使用
*ngIf
进行检查，以查看是否确实可以看到某些内容。对于最近的评论，我深表歉意。我会试试那个解决办法
    //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 { }

<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;
    }
  }
}