深入理解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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
angular *Ngif else用法详解
Dec 15 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
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python多进程操作实例
2014/11/21 Python
深入浅析Python字符编码
2015/11/12 Python
深入理解python中的select模块
2017/04/23 Python
python实现教务管理系统
2018/03/12 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
大学生简单自荐信
2013/11/10 职场文书
小学少先队活动方案
2014/02/18 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js