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 相关文章推荐
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
js调试系列 初识控制台
Jun 18 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php生成zip文件类实例
2015/04/07 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python hashlib模块实例使用详解
2019/12/24 Python
如何表示python中的相对路径
2020/07/08 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
安全检查管理制度
2014/02/02 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
政工例会汇报材料
2014/08/26 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2015暑假假期总结
2015/07/13 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis