深入理解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 相关文章推荐
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
调试Python程序代码的几种方法总结
2015/04/28 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python tkinter界面居中显示的方法
2018/10/11 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python logging模块的使用详解
2020/10/23 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
cf搞笑广告词
2014/03/14 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书