Angular2 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