Angular 4 依赖注入教程之三 ClassProvider的使用

时间 2019-11-06 标签 angular 4 依赖注入教程之三 classprovider 使用

Angular 4 依赖注入教程之一依赖注入简介html
Angular 4 依赖注入教程之二组件服务注入git
Angular 4 依赖注入教程之三 ClassProvider的使用github
Angular 4 依赖注入教程之四 FactoryProvider的使用typescript
Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象shell
Angular 4 依赖注入教程之六 Injectable 装饰器bootstrap
Angular 4 依赖注入教程之七 ValueProvider的使用segmentfault
Angular 4 依赖注入教程之八 InjectToken的使用后端

阅读须知

本系列教程的开发环境及开发语言：服务器

基础知识

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