Multi providers 让咱们能够使用相同的 Token 去注册多个 Provider ，具体以下：html
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 去获取依赖项时，咱们获取的是已注册的依赖对象列表。bootstrap
首先咱们先来分析一下，若没有设置 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 混用。angular2
1.NG_VALIDATORS app
该 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_INITIALIZERasync
该 Token 用于配置系统初始化相关的 Provideride
// 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 { }
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;
});
});
}