浅谈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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
原生JS实现拖拽功能
Dec 16 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
php Static关键字实用方法
2010/06/04 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
树结构之JavaScript
2017/01/24 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python中Numpy mat的使用详解
2019/05/24 Python
超实用的 30 段 Python 案例
2019/10/10 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python中的全局变量如何理解
2020/06/04 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
DBA的职责都有哪些
2012/05/16 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
介绍长城的导游词
2015/01/30 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python