Zeige Load Spinner auf Angular2 Route Navigieren

Question

Ich habe gesehen (this question) und seine Antwort von @borislemke.

Actaully, versucht auf Angular2 Demo-Anwendung, aber es ändert sich nicht Loader Div Hintergrundfarbe beim Navigieren zu einer anderen Route.

Mein AppComponent ist wie folgt,

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; 
     } 
    } 
} 

Mein Plunker here für Live-Test ist.

Kann mir jemand helfen, die mögliche Fehlerursache herauszufinden?

Danke.

Answer 1

Ihre App ist zu schnell, um die Navigation Änderungen abholen :)

ich eine SetTimeout eine langsame Verbindung wie so zu simulieren, hinzugefügt:

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

Versuchen Sie den obigen Code und Sie können die background-color sehen Ändern.