Angular 4 依赖注入教程之三 ClassProvider

栏目: 编程语言 · AngularJS · 发布时间: 7年前

内容简介:Angular 4 依赖注入教程之三 ClassProvider

阅读须知

本系列教程的开发环境及开发语言:

基础知识

Provider 的作用

在 Angular 中我们通过 Provider 来描述与 Token 相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:

  • useClass

  • useValue

  • useExisting

  • useFactory

Angular 4 依赖注入教程之三 ClassProvider

(图一:注入器、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';
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据库索引设计与优化

数据库索引设计与优化

【美】Tapio Lahdenmaki、【美】Michael Leach / 曹怡倩、赵建伟 / 电子工业出版社 / 2015-6 / 79.00元

《数据库索引设计与优化》提供了一种简单、高效、通用的关系型数据库索引设计方法。作者通过系统的讲解及大量的案例清晰地阐释了关系型数据库的访问路径选择原理,以及表和索引的扫描方式,详尽地讲解了如何快速地估算SQL 运行的CPU 时间及执行时间,帮助读者从原理上理解SQL、表及索引结构、访问方式等对关系型数据库造成的影响,并能够运用量化的方法进行判断和优化,指导关系型数据库的索引设计。 《数据库索......一起来看看 《数据库索引设计与优化》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具