浅谈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 XML和string相互转化实现代码
Jul 04 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
php结合js实现多条件组合查询
May 28 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
详解JVM系列之内存模型
Jun 10 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
JavaScript实现区块链
2018/03/14 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
用python打印1~20的整数实例讲解
2019/07/01 Python
在python中用url_for构造URL的方法
2019/07/25 Python
构建高效的python requests长连接池详解
2020/05/02 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
学雷锋先进个人事迹
2014/05/26 职场文书
超市理货员岗位职责
2014/07/04 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
了解Redis常见应用场景
2021/06/23 Redis
Python采集壁纸并实现炫轮播
2022/04/30 Python