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

当我更改页面时，我的主页web应用程序会显示进度，当新页面加载完成时，预压缩消失，如下图所示。

我有办法实现目标。
创建一个服务，然后在每个页面组件中添加

提供者

。其次，实现

OnDestroy

和

OnAfterContentChecked

。在

ngOnDestroy

中，通知服务启动进度，在

NgonaftContentChecked

中，通知服务停止进度

---

但那太麻烦了。我想有更好的方法来实现这个目标。谁能帮我？或者推荐我一个插件。

Angular应用程序的零配置全自动加载栏：您可以在应用程序的根目录下订阅。每次启动新的

NavigationStart

事件时，显示进度条，然后在启动

NavigationEnd

事件时隐藏进度条。

    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) {

    }
    }