深入理解Angular4中的依赖注入


Posted in Javascript onJune 07, 2017

在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。
如果我们有个服务product.service.ts,其中export了一个ProductService类,类中有一个getProduct方法。

如果不使用依赖注入,假设我们需要在product组件中使用这个服务时就会new一个ProductService类,但如果这个组件被用到了另一个地方,需要的服务改变了,我们就不得不更改组件中的内容,这样的组件不能说是可复用的。

一、注入器

Angular中的注入器只有一种实现方法就是在构造函数中声明。

例如在一个组件中

constructor(productService: ProductService){}

通俗的讲这段代码的意思就是说,这个组件创建了一个productService,而这个productService是依赖ProductService的,这里的ProductService只是一个token,至于ProductService 是什么,是怎么实现的,全都是由提供器说明的。

二、提供器

通常提供器定义在应用级,及app.module.ts中,供所有组件或服务使用,当然也可以定义在某一个组件中,只供这一个组件使用。

我们以定义在应用级为例:

@NgModule({
  provides:[ProductService]
})

这段代码其实这一个简写,全写为:

@NgModule({
  provides:[{
    provide: ProductService,
    useClass:ProductService
  }]
})

这段代码中的provide声明的就是我们刚刚在注入器中提过的token,就是说这两个token是一一对应的,Angular会到提供器中找到和注入器相同的token.

代码中的useClass是实例化ProductService类,及我们帮助我们new 了一个类出来。除了useClass外,比较常用的还用useFactory,使用工厂模式实例化一个类。

这时候我们在组件中就可以直接使用ProductService类中的方法了。

当token和想要实例化的类名字相同时,我们就可以使用上面那种简写的方法。

说了这么多,那到底怎么才能体现出可复用性呢?

如果现在我们的product组件用到了另一个地方需要使用另一个服务,我们命名为AnotherProductService。有了依赖注入我们就不必要更改组件,而是更改app.module.ts中的提供器:

@NgModule({
  provide: ProductService,
  useClass: AnotherProductService
})

从这段代码可以看出,token并没有改变,可是这是实例化的类变为了AnotherProductService。

总结来说,当组件在构造函数中说明自己想要依赖一个类时,Angular首先会在这个组件自身找有没有提供器,如果没有就去这个组件的父组件中找,如果也没有找到就去应用级(app.module.ts)中找。找到后,就会按照提供器可说明的为组件注入它想要的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用cookie记住背景颜色示例代码
Nov 04 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Validform表单验证总结篇
Oct 31 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
Vue中保存用户登录状态实例代码
Jun 07 #Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 #Javascript
Angular 4 指令快速入门教程
Jun 07 #Javascript
jstree单选功能的实现方法
Jun 07 #Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
教师远程培训感言
2014/03/06 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
单位委托书怎么写
2014/08/02 职场文书
2014年绿化工作总结
2014/12/09 职场文书
民事纠纷协议书
2016/03/23 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
Python中re模块的元字符使用小结
2022/04/07 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers