使用微调器作为全局服务答案

【问题标题】：Using spinner as global service使用微调器作为全局服务
【发布时间】：2016-11-02 18:58:13
【问题描述】：

我正在使用来自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);
  }
}

所以对于每个组件我都必须导入它，并且我想避免它，因为很多组件都会使用它。如何使其可用于整个应用程序？

【问题讨论】：

从每个消费者那里导入有一些好处，主要是调出依赖。想象一下在没有import {SpinnerService} from ... 行的情况下搜索和替换它。
但是应用程序中的微调器服务通常对于所有组件都是相同的。如果它发生变化，那么整个应用程序将被更新

标签： angular typescript spinner service-locator

【解决方案1】：

你可以创建一个基础组件并像这样放置一个 getter

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 可以在 @angular/core

中找到

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

【讨论】：

appInjector 是什么？你从哪里导入的？
@FacundoGFlores import {Injector} from '@angular/core';
@FacundoGFlores 我已经更新了答案，记住这是一个服务定位器模式，仅供您参考。