内容简介:Angular 4 依赖注入教程之三 ClassProvider
阅读须知
本系列教程的开发环境及开发语言:
基础知识
Provider 的作用
在 Angular 中我们通过 Provider
来描述与 Token
相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:
-
useClass
-
useValue
-
useExisting
-
useFactory
(图一:注入器、Provider与依赖对象关系)
Provider 的分类
在 Angular 中 Provider
主要分为:
-
TypeProvider
-
ClassProvider
-
ValueProvider
-
ExistingProvider
-
FactoryProvider
ClassProvider
ClassProvider 接口定义
export interface ClassProvider { // 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、 // OpaqueToken的实例或字符串 provide: any; useClass: Type<any>; // 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖 // 对象列表 multi?: boolean; }
看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider
。不信你往下看:
@NgModule({ ... providers: [HeroService], // 方式一 bootstrap: [AppComponent] }) export class AppModule { } // TypeProvider接口 export interface TypeProvider extends Type<any> {}
那跟 ClassProvider
有什么关系?先不急,请你继续往下看:
@NgModule({ ... providers: [{ provide: HeroService, useClass: HeroService // 方式二 }], bootstrap: [AppComponent] }) export class AppModule { }
是不是终于看到了 useClass
。其实上面两种方式是等价的,方式一更加简洁,方式二是采用标准的语法哈。那么问题来了,什么时候要使用 useClass
语法?回答这个问题前,我们先看个需求。
假设由于业务需要,先前我们定义的 HeroService
的数据,需要从服务器获取,而不是使用静态数据。项目采用前后端分离的开发方式进行开发,此外在项目开发前已经协商好数据格式,也给出了对应的模拟数据(测试数据)。
那么除了修改原有的 HeroService
服务外,有没有其它方式可以方便地验证一下模拟数据,同时保持较小的改动量哈。其实我们可以创建一个新的数据服务,如 MockHeroService
,具体实现如下:
创建 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 { }
更新完相关的代码,正常情况下,在 http://localhost:4200/
页面,你将看到以下的内容:
ID: 16 - Name: RubberMan ID: 17 - Name: Dynama ID: 18 - Name: Dr IQ ID: 19 - Name: Magma ID: 20 - Name: Tornado
其实服务命名为 MockHeroService
的目的,也是为了说明依赖注入的好处,即易于进行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService
的地方。
我有话说
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'; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Domain-Driven Design Distilled
Vaughn Vernon / Addison-Wesley Professional / 2016-6-2 / USD 36.99
Domain-Driven Design (DDD) software modeling delivers powerful results in practice, not just in theory, which is why developers worldwide are rapidly moving to adopt it. Now, for the first time, there......一起来看看 《Domain-Driven Design Distilled》 这本书的介绍吧!
随机密码生成器
多种字符组合密码
UNIX 时间戳转换
UNIX 时间戳转换