角度2のルートスピンナーを表示するルート移動

Question

私は（this question）とその回答を@borislemkeから見ました。

Actaullyは、Angular2デモアプリケーションで試しましたが、別のルートに移動中にローダー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; 
     } 
    } 
} 

マイplunkerライブテストのためにhereである、です。

誰も私が失敗の原因を考え出すのを手助けできますか？

ありがとうございました。

Answer 1

アプリは、ナビゲーションの変更を拾うにはあまりにも速いです:)

私はそうのような低速な接続をシミュレートするためのsetTimeoutを追加しました：

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

は、上記のコードを試してみてはbackground-colorを見ることができます変化。