Angular更改页面时如何加载进度？

Question

当我更改页面时，我回家的Web应用程序显示进度，当新页面加载完成时，序言消失，如下图所示。

我有办法实现目标。
创建一个服务，然后在每个页面组件中添加providers。其次，实现OnDestroy和OnAfterContentChecked。在ngOnDestroy中，通知服务在{{1}中启动进度}，通知服务停止进度。

但这太麻烦了。我认为有一种更好的方法可以实现目标，谁能帮助我？或建议我使用插件。

Answer 1

    constructor(private router: Router, private ngZone: NgZone,
private renderer: Renderer,) {
        router.events.subscribe((event: RouterEvent) => {
          this._navigationInterceptor(event);
        });
      }
     private _navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
      // bypass change detection
      this.ngZone.runOutsideAngular(() => {

      });
    }
}
  if (event instanceof NavigationEnd) {

    }

    if (event instanceof NavigationCancel) {

    }
    if (event instanceof NavigationError) {

    }
    }