angular - 如何获得加载 Angular LazyModule 文件的进度？

Question

我想弄清楚如何为加载 Angular LazyLoaded 模块制作进度指示。

我可以更改预加载策略，但是否有一个钩子(Hook)可以订阅加载进度？

export class MyPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
        return of(true).pipe(flatMap(_ => load()));
    }
}

是否可以订阅 load 至少知道它何时加载？

Answer 1

您可以订阅Router.events https://angular.io/guide/router#router-events

RouteConfigLoadStart

An event triggered before the Router lazy loads a route configuration.

RouteConfigLoadEnd

An event triggered after a route has been lazy loaded.

假设您有以下惰性路线:

{
  path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}

下面是如何 Hook 到这个模块的加载过程:

import { RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';

...
constructor(private router: Router) {
  router.events.subscribe((
    event => {
      if (event instanceof RouteConfigLoadStart && event.route.path === 'lazy') {
        console.log('START');
      }
      if (event instanceof RouteConfigLoadEnd && event.route.path === 'lazy') {
        console.log('FINISH');
      }
    }));
}