angular 服务随记小结


Posted in Javascript onMay 06, 2019

依赖注入

创建服务需要用到Injectable,@Injectable() 装饰器把类标记为可供注入的服务,不过在使用该服务的 provider 配置好 Angular 的依赖注入器之前,Angular 实际上无法将其注入到任何位置。

provider告诉注入器如何创建该服务,可以通过设置元数据来配置注入器(3种方式):

  • 在服务本身的 @Injectable() 装饰器中。
  • 在 NgModule 的 @NgModule() 装饰器中。
  • 在组件的 @Component() 装饰器中。

@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项,在这里指定把被装饰类的provider放到 root 注入器中,或某个特定 NgModule 的注入器中。

@NgModule() 和 @Component() 装饰器都有用一个 providers 元数据选项,在那里你可以配置 NgModule 级或组件级的注入器。

注入器与服务实例

在某个注入器范围内,服务是单例的。应用只有一个根注入器,angular具有多级注入器系统,以为者下级注入器可以创建自己的服务实例。

每当 Angular 创建一个在 @Component() 中指定了 providers 的组件实例时,它也会为该实例创建一个新的子注入器。 类似的,当在运行期间加载一个新的 NgModule 时(即lazy module),Angular 也可以为它创建一个拥有自己的提供商的注入器。

借助注入器继承机制,仍然可以把全应用级的服务注入到这些组件中。 组件的注入器是其父组件注入器的子节点,也是其父节点的父节点的后代,以此类推,直到应用的根注入器为止。 Angular 可以注入该继承谱系中任何一个注入器提供的服务。

模块化编程时,service、component、pipe等最好都放在module中,需要引入这些服务时,通过导入module来引用,不要直接import service 和component,这不符合模块化思想。

多级注入系统

应用程序中有一个与组件树平行的注入器树,对于在什么级别上注入会最终导致:

  • 最终包的大小
  • 服务的范围
  • 服务的生命周期

当在服务自身的@Injectable()装饰器中指定provider时,CLI生产模式所用的优化工具可以进行摇树优化,它会移除那些没有用过的服务,摇树优化生成的包更小。

三级provider

  • root级,是AppModule全局的,配置方法已提。
  • NgModule级,两种方法:可以在module的@NgModule 的 provider 元数据中指定;也可以在@injectable() 的providerIn选项中指定某个模块类

如果模块是lazy modole,需要使用@NgModule的provider选项。

  • 组件级为每个component实例配置自己的注入器

无论对于根级注入器还是模块级注入器,服务实例的生存期都和应用或模块本身相同。Angular 可以把这个服务实例注入到任何需要它的类中(即app内是单例的)。Angular 只能把相应的服务注入到该组件实例或其下级组件实例中,而不能把这个服务实例注入到其它地方(即组件内并不是单例的)。

注入器冒泡

当一个组件申请获得一个依赖时,Angular 先尝试用该组件自己的注入器来满足它。 如果该组件的注入器没有找到对应的提供商,它就把这个申请转给它父组件的注入器来处理。 如果那个注入器也无法满足这个申请,它就继续转给它在注入器树中的父注入器。 这个申请继续往上冒泡 —— 直到 Angular 找到一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。 如果超出了组件树中的祖先还未找到,Angular 就会抛出一个错误。

单例服务

在angular中创建单例服务有两种方式:

  • 在创建服务时声明该服务在应用的根上提供
  • 把该服务包含在AppModule或者某个只会被AppModule导入的模块中

这里第一条很容易理解。重点第二条:当通过@NgMododule()来声明一个serivce时,这个服务在AppModule内将会是单例的,当一个module中提供了一个service,当另一个lazy module导入了这个模块时,angular会为它创一个子注入器,会重新创建service的实例,此service也就多了一个实例。

forRoot()

如果某个模块同时提供了服务提供商和可声明对象(组件、指令、管道),那么当在某个子注入器中加载它的时候(比如lazy module),就会生成多个该服务提供商的实例。 而存在多个实例会导致一些问题,因为这些实例会屏蔽掉根注入器中该服务提供商的实例,而它的本意可能是作为单例对象使用的。 因此,Angular 提供了一种方式来把服务提供商从该模块中分离出来,以便该模块既可以带着 providers 被根模块导入,也可以不带 providers 被子模块导入。

如上文所述,当在运行期间加载一个新的 NgModule 时(即lazy module),Angular 也可以为它创建一个注入器,所以此时导入的其他模块中的service就生成了多个实例,而forRoot可以保证并不创建新的service实例,而是去引用root注入器中的service实例,也就保证了service依然是个单例服务。

Code

在懒加载模块中导入有service的TestDIModule模块

@NgModule({
 imports: [
 CommonModule,
 BatteryRoutingModule,
 TestDIModule
 ],
 declarations: [BatteryWidgetComponent, BatteryTwoComponent,
 DemoComponent]
})

在TestDIModule模块中

@NgModule({
 imports: [
 CommonModule
 ],
 declarations: [TestDiComponent],
 exports: [TestDiComponent],
 providers: [ ]
})
export class TestDIModule {
 static forRoot(): ModuleWithProviders {
 return {
  ngModule: TestDIModule,
  providers: [
  TestDiService
  ]
 };
 }
 }

在根模块中引入TestDIModule模块

imports: [
 BrowserModule,
 TestDIModule.forRoot(),
 ],

最后在根模块路由中添加这个懒加载模块

const routes: Routes = [
 { path: 'battery', loadChildren: './battery-widget/battery.widget.module#BatteryWidgetModule' },
];

@NgModule({
 exports: [ RouterModule ],
 imports: [ RouterModule.forRoot(routes)
 ],
})

作为测试,可以在TestDIModule中的service中打log看一下

import { Injectable, ModuleWithProviders } from '@angular/core';
import { TestDIModule } from './test-di.module'

@Injectable()
export class TestDiService {

 constructor() {
 console.log('->TestDiService');
 }

 addCoount() {
 this.count++;
 console.log('->count', this.count);
 }

 count = 0;
}

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

Javascript 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JS中Map和ForEach的区别
Feb 05 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
js+html实现点名系统功能
Nov 05 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
详解如何使用nvm管理Node.js多版本
May 06 #Javascript
关于AOP在JS中的实现与应用详解
May 06 #Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 #Javascript
一文读懂ES7中的javascript修饰器
May 06 #Javascript
JavaScript中AOP的实现与应用
May 06 #Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 #Javascript
vue如何截取字符串
May 06 #Javascript
You might like
php getsiteurl()函数
2009/09/05 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
浅析php单例模式
2014/11/25 PHP
php编写简单的文章发布程序
2015/06/18 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
jquery 常用操作方法
2010/01/28 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
关于热爱祖国的演讲稿
2014/05/04 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技