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