如何显示 Angular 延迟加载路由的加载状态？

Question

我有一个使用独立组件的 Angular 17 应用程序，初始路由的设置如下

app.routes.ts

export const appRoutes: Array<Route> = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent,
    title: 'Login',
  },
  {
    path: '',
    canActivateChild: [AuthGuard],
    loadChildren: () => import(`./app-authorized.routes`).then((r) => r.appAuthorizedRoutes),
  },
  { path: '**', redirectTo: '/dashboard' },
];

用户登录后，他们将被授权并重定向到

/dashboard

，并且

app-authorized.routes.ts

路由将被加载。该文件如下所示：

export const appAuthorizedRoutes: Array<Route> = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    title: 'Dashboard',
  },
  {
    path: 'settings',
    component: SettingsComponent,
    canActivate: [AuthGuard],
    title: 'Settings',
  },
  //etc...
];

我遇到的一个问题是，登录后，数据加载有延迟，而且 UI 看起来很奇怪。我设置了一个导航栏，在授权时显示，该导航栏显示，但登录组件仍然显示 - 这是错误的。

登录后，当延迟加载的块正在加载时，有没有办法以某种方式在 UI 中显示此进度？

Answer 1

事实证明，当您在路线配置中使用

loadChildren

时，有用于加载这些的开始/结束事件，完美！当我注销这些内容时，很容易准确地看到发生了什么

所以这意味着添加加载器现在非常简单

export class AppComponent implements OnInit {
  private readonly router = inject(Router);
  
  isLoadingRouteConfig = false;
  
  ngOnInit(): void {
    this.router.events.subscribe((ev) => {
      if (ev instanceof RouteConfigLoadStart) {
        this.isLoadingRouteConfig = true;
      } else if (ev instanceof RouteConfigLoadEnd) {
        this.isLoadingRouteConfig = false;
      }
    });
  }
}

然后在模板中：

@if (isLoadingRouteConfig) {
    Loading...
} @else {
    <router-outlet></router-outlet>
}