Mit Spinnern als globaler Service

Question

Ich bin mit dem folgenden Spinner aus dem ng2-admin Thema:

import {Injectable} from '@angular/core'; 

@Injectable() 
export class BaThemeSpinner { 

    private _selector:string = 'preloader'; 
    private _element:HTMLElement; 

    constructor() { 
    this._element = document.getElementById(this._selector); 
    } 

    public show():void { 
    this._element.style['display'] = 'block'; 
    } 

    public hide(delay:number = 0):void { 
    setTimeout(() => { 
     this._element.style['display'] = 'none'; 
    }, delay); 
    } 
} 

Also für jede Komponente ich es importieren müssen, und ich will, es zu vermeiden, da viele Komponenten es verwenden werden. Wie kann ich es der gesamten Anwendung zur Verfügung stellen?

Answer 1

Sie können eine Basiskomponente erstellen und setzen einen Getter wie

export class BaseView { 

    protected _injector:Injector; 

    protected _spinnerService:SpinnerService; 

    constructor() { 
     let providers = ReflectiveInjector.resolve([SpinnerService]); 
     this._injector = ReflectiveInjector.fromResolvedProviders(providers); 
    } 

    get spinnerService(): SpinnerService { 
     if (this._spinnerService == null) { 
      this._spinnerService = this._injector.get(SpinnerService); 
     } 
     return this._spinnerService; 
    } 
} 

dann verwenden:

this.spinnerService.show() 

ReflectiveInjector kann innerhalb von @ Winkel/Kern

finden

Text: https://angular.io/docs/ts/latest/api/core/index/ReflectiveInjector-class.html