Angular 4 依赖注入教程之三 ClassProvider的使用
目录
阅读须知本系列教程的开发环境及开发语言:
基础知识Provider 的作用在 Angular 中我们通过
(图一:注入器、Provider与依赖对象关系) Provider 的分类在 Angular 中
ClassProviderClassProvider 接口定义export interface ClassProvider { // 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、 // OpaqueToken的实例或字符串 provide: any; useClass: Type<any>; // 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖 // 对象列表 multi?: boolean; } 看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 @NgModule({ ... providers: [HeroService],// 方式一 bootstrap: [AppComponent] }) export class AppModule { } // TypeProvider接口 export interface TypeProvider extends Type<any> {} 那跟 @NgModule({ ... providers: [{ provide: HeroService,useClass: HeroService // 方式二 }],bootstrap: [AppComponent] }) export class AppModule { } 是不是终于看到了 假设由于业务需要,先前我们定义的 那么除了修改原有的 创建 MockHeroService 服务export class MockHeroService { heros: Array<{ id: number; name: string }> = [ { id: 16,name: 'RubberMan' },{ id: 17,name: 'Dynama' },{ id: 18,name: 'Dr IQ' },{ id: 19,name: 'Magma' },{ id: 20,name: 'Tornado' } ]; getHeros() { return this.heros; } } 使用 MockHeroService 服务@NgModule({ ... providers: [{ provide: HeroService,useClass: MockHeroService }],bootstrap: [AppComponent] }) export class AppModule { } 更新完相关的代码,正常情况下,在 ID: 16 - Name: RubberMan ID: 17 - Name: Dynama ID: 18 - Name: Dr IQ ID: 19 - Name: Magma ID: 20 - Name: Tornado 其实服务命名为 我有话说ClassProvider 接口中的 Type 类型是什么?export interface Type<T> extends Function { new (...args: any[]): T; } export function isType(v: any): v is Type<any> { return typeof v === 'function'; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |