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; }); }); } 参考资料
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- scala – 更新后尚未解决依赖SBT 0.13.0
- twitter-bootstrap – 我应该使用从CDN的Bootstrap还是在我
- angularjs – 在angular js datepicker指令中仅隐藏clear按
- 如何将我的AngularJS静态网站上传到Github Pages?
- bash – 创建zip而不记录根路径;编程
- [angular]知识碎片
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
- Bash Node.js stdin / stdout重定向:错误“不是tty”
- unix – 众所周知的UID是什么?
- scala – 从Spark中的cassandra表中删除