Javascript 如何检测angular 4中加载的事件组件？

我在angular 4应用程序中惰性加载了一个模块。 现在，这个模块使用自己的路由在内部加载了各种组件。 我想在加载每个组件之前显示一个加载程序。 我尝试了不同的路由器事件。下面的组件是这个延迟加载模块的根组件

constructor(
private router: Router
) {
  router.events.subscribe((event: RouterEvent) => {
    this.navigationInterceptor(event)
   })
}

navigationInterceptor(event: RouterEvent): void {
    this.routeLoading=true;
    if (event instanceof NavigationStart) {
      this.routeLoading = true;
    }
    if (event instanceof NavigationEnd) {
      this.routeLoading = false;
    }

    // Set loading state to false in both of the below events to hide the loading bar if routing error is thrown.
    if (event instanceof NavigationCancel) {
      this.routeLoading = false;
    }
    if (event instanceof NavigationError) {
      this.routeLoading = false;
    }
}

在我看来，我正在做这样的事情：

<div *ngIf="routeLoading">
  <md-progress-bar  [color]="color" [mode]="mode" [value]="value" [bufferValue]="bufferValue"></md-progress-bar>
</div>

---

但这里的问题是，这些事件解决得太快了。即使未加载视图，也不会显示加载器。我的意思是，在加载组件之前，屏幕是空白的，加载器没有出现。

加载器html代码在哪里？我认为您应该第一次使用它。routeLoading=false@soumya我已经在下面编写了加载程序代码。您的逻辑正确，请确保您已经在应用程序组件中放置了进度条。加载程序html代码在哪里？我认为您应该第一次使用它。routeLoading=false@soumya我已经在下面编写了加载程序代码。您的逻辑是正确的，请确保您已经在应用程序组件中放置了进度条。