学习目录
前言
本文属于angular 4依赖注入学习系列文章的第三篇，主要给大家介绍了angular 4依赖注入之classprovider使用的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：
本系列教程的开发环境及开发语言：
基础知识
provider 的作用
在 中我们通过 provider 来描述与 token 相关联的依赖对象的创建方式。在 中依赖对象的创建方式分为以下四种：
(图一：注入器、provider与依赖对象关系)
provider 的分类
在 angular 中 provider 主要分为：
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 的目的，也是为了说明依赖注入的好处，即易于进行本地单元测试。此外假设没有利用 的特性，我们需要修改应用中每个应用到 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';
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论