浅谈Angular6的服务和依赖注入


Posted in Javascript onJune 27, 2018

在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作.

先解释两个概念:

  1. Providers(提供商):是个比较抽象的名词,我们把它想象为'图纸'更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类.
  2. Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事物中的工具.angular应用在启动时,会自动创建.

假想一个去医院看病的过程:

找医生看病判断病情,医生开处方 --> 处方交给护士 --> 护士小姐姐根据处方给你注射药物.

这里医生开的处方是providers,将处方交给护士则是将providers注册到injector,护士小姐姐是injector

angular中有很多方式可以将providers注册到injector:

@Injectable 装饰器

在服务类的 @Injectable 装饰器中

//service
  @Injectable({
    providedIn: 'root',
  })

providedIn: 'root' 告诉 Angular在根注入器中注册这个图纸.root 还可以是某一个具体的模块名.

这种方式注册,在代码编译打包时,可以执行摇树优化,这会移除所有没在应用中使用过的服务。摇树优化会使打包体积更小。

@NgModule 中的 providers

在模块的 @NgModule

//service
  @Injectable()
  //module
  @NgModule({
    providers: [
      UserService,
      { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
    ],
  })

这种方式注册,可以对图纸进行一些额外的配置.

note:在@NgModule中注册的服务,在图纸中也需要写@Injectable()装饰器

在组件中注册

在组件的 @Component 中

@Component({
  selector: 'app-heroes',
  providers: [ HeroService ]

这种方式注册,会注册到每个组件实例自己的注入器上。(多个组件会有多个注入器)

note:服务在每个注入器的范围内是单例的。 在任何一个注入器中,最多只会有同一个服务的一个实例。

不提供图纸

最常见的图纸是class,但是在配置providers: []时,也可以不提供class图纸,而是返回对象的工厂函数,或是对象字面量[{ provide: Logger, useClass: Logger }]

也可以使用useValue属性直接交付一个对象实例,[{ provide: Logger, useValue: silentLogger }]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
微信开发 微信授权详解
Oct 21 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 #Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 #Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 #Javascript
浅谈Webpack下多环境配置的思路
Jun 27 #Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 #Javascript
详解关于vue-area-linkage走过的坑
Jun 27 #Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 #Javascript
You might like
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
功能强大的php分页函数
2016/07/20 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python对象与json相互转换的方法
2019/05/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python中reload重载实例用法
2020/12/15 Python
纽约海:Sea New York
2018/11/04 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
纠风工作实施方案
2014/03/15 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
学校师德师风整改措施
2014/10/27 职场文书
培训通知书模板
2015/04/17 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
Python3 类型标注支持操作
2021/06/02 Python