在Angular2路线导航上显示加载微调器

我从@borislemke看到了（）及其答案

实际上，在Angular2演示应用程序上进行了尝试，但在导航到另一条路线时，它并没有改变Loader Div的背景颜色

我的AppComponent如下所示

import { Component, OnInit }          from '@angular/core';
import { Router, ROUTER_DIRECTIVES, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
import {NgClass} from '@angular/common';

import { DialogService }  from './dialog.service';
import { HeroService }    from './heroes/hero.service';

@Component({
  selector: 'my-app',
  template: `
    <h1 class="title">Component Router</h1>
    <div>Is Navigating -->  {{isLoading}}</div>

    <div [ngClass]="{afterLoad: !isLoading, loading: isLoading }" > Loader Spinner Container </div>

    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active"
         routerLinkActiveOptions="{ exact: true }">Crisis Center</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
      <a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
      <a routerLink="/login" routerLinkActive="active">Login</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles:[`
    .loading{
    background-color:red
    }

    .afterLoad{
    background-color:yellow
    }
  `],
  providers:  [
    HeroService,
    DialogService
  ],
  directives: [ROUTER_DIRECTIVES, NgClass]
})
export class AppComponent implements OnInit {
    isLoading: boolean = false;

   constructor(private _router:Router) {}

    ngOnInit() {
        // TODO: assign proper type to event
        this._router.events.subscribe((event: any): void => {
            this.navigationInterceptor(event);
        });
    }

    navigationInterceptor(event): void {
        if (event instanceof NavigationStart) {
            this.isLoading = true;
        }
        if (event instanceof NavigationEnd) {
            this.isLoading = false;
        }
        if (event instanceof NavigationCancel) {
            this.isLoading = false;
        }
        if (event instanceof NavigationError) {
            this.isLoading = false;
        }
    }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，Router_指令，NavigationStart，NavigationEnd，NavigationError，NavigationCancel}；
从'@angular/common'导入{NgClass}；
从“./dialog.service”导入{DialogService}；
从“./heros/hero.service”导入{HeroService}；
@组成部分({
选择器：“我的应用程序”，
模板：`
组件路由器
正在导航-->{{isLoading}
装载机旋转容器
用于现场测试

有人能帮我找出失败的可能原因吗

谢谢。
您的应用程序太快，无法获取导航更改：）

我添加了一个setTimeout来模拟慢速连接，如下所示：

if (event instanceof NavigationEnd) {
    // this.isLoading = false;
    setTimeout(() => this.isLoading = false, 1000);
}

尝试上述代码，您可以看到背景颜色的变化