UPDATE: 3 Nachdem ich auf einen neuen Router aktualisiert habe , funktioniert der Ansatz von @borislemke nicht, wenn Sie CanDeactivateGuard verwenden. Ich erniedrige mich zu meiner alten Methode, ie:dieser Antwort
UPDATE2 : Router-Ereignisse in New-Router sehen vielversprechend aus und die Antwort von @borislemke scheint den Hauptaspekt der Spinner-Implementierung abzudecken. Ich habe es nicht getestet, aber ich empfehle es.
UPDATE1: Ich habe diese Antwort in der Zeit geschrieben Old-Router, als es nur ein Ereignis gab route-changed, über das benachrichtigt wurde router.subscribe(). Ich fühlte auch eine Überlastung des folgenden Ansatzes und versuchte, ihn nur mit zu verwenden router.subscribe(), und er schlug fehl, weil es keine Möglichkeit gab, ihn zu erkennen canceled navigation. Also musste ich zu einem langwierigen Ansatz zurückkehren (Doppelarbeit).
Wenn Sie sich in Angular2 auskennen, ist dies das, was Sie brauchen
Boot.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MyApp} from 'path/to/MyApp-Component';
import { SpinnerService} from 'path/to/spinner-service';
bootstrap(MyApp, [SpinnerService]);
Root Component- (MyApp)
import { Component } from '@angular/core';
import { SpinnerComponent} from 'path/to/spinner-component';
@Component({
selector: 'my-app',
directives: [SpinnerComponent],
template: `
<spinner-component></spinner-component>
<router-outlet></router-outlet>
`
})
export class MyApp { }
Spinner-Komponente (abonniert den Spinner-Service, um den Wert von active entsprechend zu ändern)
import {Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
selector: 'spinner-component',
'template': '<div *ngIf="active" class="spinner loading"></div>'
})
export class SpinnerComponent {
public active: boolean;
public constructor(spinner: SpinnerService) {
spinner.status.subscribe((status: boolean) => {
this.active = status;
});
}
}
Spinner-Service (Bootstrap diesen Service)
Definieren Sie eine Observable, die von der Spinner-Komponente abonniert werden soll, um den Status bei Änderung zu ändern, und die Funktion, um den Spinner zu kennen und aktiv / inaktiv zu setzen.
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/share';
@Injectable()
export class SpinnerService {
public status: Subject<boolean> = new Subject();
private _active: boolean = false;
public get active(): boolean {
return this._active;
}
public set active(v: boolean) {
this._active = v;
this.status.next(v);
}
public start(): void {
this.active = true;
}
public stop(): void {
this.active = false;
}
}
Alle anderen Routenkomponenten
(Stichprobe):
import { Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
template: `<div *ngIf="!spinner.active" id="container">Nothing is Loading Now</div>`
})
export class SampleComponent {
constructor(public spinner: SpinnerService){}
ngOnInit(){
this.spinner.stop(); // or do it on some other event eg: when xmlhttp request completes loading data for the component
}
ngOnDestroy(){
this.spinner.start();
}
}