Использование вертушка в качестве глобальной службы

Question

Я использую следующий вертушку из ng2-admin темы:

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

Таким образом, для каждого компонента я должен импортировать его, и я хочу, чтобы избежать этого, поскольку многие компоненты будут использовать его. Как я могу сделать его доступным для всего приложения?

Answer 1

Вы можете создать базовый компонент и положить поглотитель как

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

затем использовать его:

this.spinnerService.show() 

ReflectiveInjector можно найти внутри @ угловой/ядра

Документы: https://angular.io/docs/ts/latest/api/core/index/ReflectiveInjector-class.html