欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular 4依赖注入学习教程之ClassProvider的使用(三)

程序员文章站 2022-04-10 10:49:55
学习目录 angular 4 依赖注入教程之一 依赖注入简介 angular 4 依赖注入教程之二 组件服务注入 angular 4 依赖注入教程...

学习目录

前言

本文属于angular 4依赖注入学习系列文章的第三篇,主要给大家介绍了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';
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。