深入理解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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
浅谈JS的原型和继承
May 08 Javascript
vue实现购物车列表
Jun 30 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
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
全国中波电台频率表
2020/03/11 无线电
discuz7 phpMysql操作类
2009/06/21 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php 的反射详解及示例代码
2016/08/25 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中特殊函数集锦
2015/07/27 Python
详解Python进程间通信之命名管道
2017/08/28 Python
解决python 输出是省略号的问题
2018/04/19 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
考试不及格检讨书
2014/01/09 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
艺术节主持词
2014/04/02 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
结婚典礼致辞
2015/07/28 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript