浅谈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 相关文章推荐
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
python创建和使用字典实例详解
2013/11/01 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python 去除字符串中指定字符串
2020/03/05 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
建筑项目策划书
2014/01/13 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
求职个人评价范文
2014/04/09 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
工作简历自我评价
2015/03/11 职场文书
长征观后感
2015/06/09 职场文书