深入理解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的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
vue.js todolist实现代码
Oct 29 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
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
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python实现批量命名照片
2020/06/18 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
用Python进行websocket接口测试
2020/10/16 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
任意存:BOXFUL
2018/05/21 全球购物
应届生.NET方向面试题
2015/05/23 面试题
学校领导班子群众路线整改措施
2014/09/16 职场文书
司考复习计划
2015/01/19 职场文书
邀请函格式范文
2015/02/02 职场文书
索赔员岗位职责
2015/02/15 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang