Angular 2 Multi Providers

Multi providers 讓咱們能夠使用相同的 Token 去註冊多個 Provider ，具體以下：

const SOME_TOKEN: OpaqueToken = new OpaqueToken('SomeToken');

var injector = ReflectiveInjector.resolveAndCreate([
  provide(SOME_TOKEN, {useValue: 'dependency one', multi: true}),
  provide(SOME_TOKEN, {useValue: 'dependency two', multi: true})
]);

// dependencies == ['dependency one', 'dependency two']
var dependencies = injector.get(SOME_TOKEN);

上面例子中，咱們使用 multi: true 告訴 Angular 2的依賴注入系統，咱們設置的 provider 是 multi provider。正如以前所說，咱們能夠使用相同的 token 值，註冊不一樣的 provide。當咱們使用對應的 token 去獲取依賴項時，咱們獲取的是已註冊的依賴對象列表。

爲何 Angular 2 中會引入 multi provider ？

首先咱們先來分析一下，若沒有設置 multi: true 屬性時，使用同一個 token 註冊 provider 時，會出現什麼問題 ？

class Engine { }
class TurboEngine { }

var injector = ReflectiveInjector.resolveAndCreate([
  provide(Engine, {useClass: Engine}),
  provide(Engine, {useClass: TurboEngine})
]);

var engine = injector.get(Engine); // engine instanceof TurboEngine == true

這說明若是使用同一個 token 註冊 provider，後面註冊的 provider 將會覆蓋前面已註冊的 provider。此外，Angular 2 使用 multi provider 的這種機制，爲咱們提供可插拔的鉤子(pluggable hooks) 。另外須要注意的是，multi provider是不能和普通的 provider 混用。

Angular 2 框架中 multi provider 的應用

1.NG_VALIDATORS

該 Token 用於配置自定義驗證器 Provider

@Directive({
  selector: '[customValidator][ngModel]',
  providers: [
  {
    provide: NG_VALIDATORS,
    useValue: (formControl) => {
      // validation happens here
    },
    multi: true
  }
 ]
})
class CustomValidator {}

以上是咱們自定義的表單驗證器，爲了可以正常工做，咱們必須在指令的 providers 數組中，使用 NG_VALIDATORS 註冊相應的 provider。

2.APP_INITIALIZER

該 Token 用於配置系統初始化相關的 Provider

// exe-app-v2/src/core/core_module.ts
export function configFactory(config: AppConfig) {
    return function () { config.load(); }
}

@NgModule({
      ...,
    providers: [
        // 系統啓動時，加載項目的配置文件，如系統登陸、首頁模塊的ApiUrl等信息
      { provide: APP_INITIALIZER, useFactory: configFactory, 
          deps: [AppConfig], multi: true }
    ]
})
export class CoreModule { }

APP_INITIALIZER 詳解

1.APP_INITIALIZER 的定義

// 使用 InjectionToken<T> 的方式聲明，APP_INITIALIZER關聯的對象是數組，數組內的元素是函數對象
export const APP_INITIALIZER = new InjectionToken<Array<() => void>>
('Application Initializer');

2.註冊 APP_INITIALIZER 關聯的 Provider

// @angular/core/src/application_module.ts
@NgModule({
  providers: [
    {provide: APP_INITIALIZER, useValue: _initViewEngine, multi: true},
  ]
})
export class ApplicationModule {
}

3.APP_INITIALIZER 在系統中的應用

/**
* 用於反映 APP_INITIALIZER 初始化函數的執行狀態
*/
@Injectable()
export class ApplicationInitStatus {
  private _donePromise: Promise<any>;
  private _done = false; // 標識是否完成初始化

  // 在構造函數中注入 APP_INITIALIZER，關聯的依賴對象
  constructor(@Inject(APP_INITIALIZER) @Optional() appInits: (() => any)[]) {
    const asyncInitPromises: Promise<any>[] = [];
    if (appInits) {
      // 循環調用已註冊的初始化函數
      for (let i = 0; i < appInits.length; i++) {
        const initResult = appInits[i]();
        // 驗證初始化函數的調用結果是否爲Promise對象，如果則添加至異步隊列
        if (isPromise(initResult)) {
          asyncInitPromises.push(initResult);
        }
      }
    }
    this._donePromise = Promise.all(asyncInitPromises).then(() => { this._done = true; });
    if (asyncInitPromises.length === 0) { // 不包含異步任務
      this._done = true;
    }
  }

  get done(): boolean { return this._done; }

  get donePromise(): Promise<any> { return this._donePromise; }
}

// 啓動ModuleFactory
bootstrapModuleFactory<M>(moduleFactory: NgModuleFactory<M>): Promise<NgModuleRef<M>> {
    return this._bootstrapModuleFactoryWithZone(moduleFactory, null);
}
// 在新建立的zone中，啓動ModuleFactory
private _bootstrapModuleFactoryWithZone<M>(moduleFactory: NgModuleFactory<M>, 
  ngZone: NgZone): Promise<NgModuleRef<M>> {  
    return _callAndReportToErrorHandler(exceptionHandler, () => {
        // 獲取ApplicationInitStatus關聯的依賴對象
      const initStatus: ApplicationInitStatus = 
          moduleRef.injector.get(ApplicationInitStatus); 
          // initStatus.donePromise = Promise.all(asyncInitPromises)
        // .then(() => { this._done = true; });
        return initStatus.donePromise.then(() => {
          this._moduleDoBootstrap(moduleRef);
          return moduleRef;
        });
      });
}

參考資料

• multi-providers-in-angular-2