ОБНОВЛЕНИЕ: 3 Теперь, когда я обновился до нового маршрутизатора, подход @borislemke не будет работать, если вы используете CanDeactivateохранник. Я унижаюсь до своего старого метода, ie:этот ответ
UPDATE2 : события в маршрутизатор нового маршрутизатора выглядит многообещающим и ответ на @borislemke , кажется, охватывает основной аспект реализации вращателя я havent't тестировал , но я рекомендую его.
ОБНОВЛЕНИЕ1: я написал этот ответ в эпоху Old-Router, когда раньше было только одно событие, route-changedо котором сообщалось через router.subscribe(). Я также почувствовал перегрузку приведенного ниже подхода и попытался сделать это, используя только router.subscribe(), но это привело к обратным результатам, потому что не было возможности обнаружить canceled navigation. Поэтому мне пришлось вернуться к длительному подходу (двойной работе).
Если вы разбираетесь в Angular2, это то, что вам нужно
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]);
Корневой компонент- (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-Component (подпишется на Spinner-service, чтобы соответственно изменить значение active)
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 (загрузите эту службу)
Определите наблюдаемый объект, на который будет подписан компонент-прядильщик, чтобы изменить статус при изменении, и функцию, чтобы узнать и установить активный / неактивный прядильщик.
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;
}
}
Компоненты всех остальных маршрутов
(образец):
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();
}
}