深入理解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插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
django实现分页的方法
2015/05/26 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
django的ORM模型的实现原理
2019/03/04 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
自我评价范文点评
2013/12/04 职场文书
校园活动策划书范文
2014/01/10 职场文书
医院实习介绍信
2014/01/12 职场文书
公司门卫岗位职责
2014/03/15 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书