Angular2 多级注入器详解及实例


Posted in Javascript onOctober 30, 2016

angular2 的依赖注入包含了太多的内容,其中的一个重点就是注入器,而注入器又非常难理解,今天我们不深入介绍注入器的内容,可以参考官方文档,我们今天来说注入器的层级。

也就是组件获取服务的容器会选择具体哪一个。

先简单介绍一个背景:有3个组件AppComponent 根组件、DetailList组件 ( 日志列表组件)、Detail组件( 日志组件)。

Angular2 多级注入器详解及实例

这三个组件会形成一个组件树,对应的我们也可以认为每个组件都会有一个独立的注入器(有时候不会出现,但是可以这么认为)。

加入一个日志服务LoggerService,如果按照我们普通的入门方式,在根模块providers 中提供LoggerService。那么在整个应用程序中,LoggerService只有一个实例,什么意思呢?就是说无论在哪个组件,获取到的都是首次创建的LoggerService,所有组件共用一个服务实例,这有时候会是一个有用的特性,比如我们使用的全局配置。

全局唯一不是我们这次要验证的重点,因为这个太普通,我们这次要说明的是我们如何在每个组件中都获取单独的LoggerService实例,即每个组件的实例都不同。这个就需要对ng2的依赖注入有所了解才可以。

我们逐步来说明如何实现?

为了便于看到这篇短文的同学有所了解,我加入一些基础代码。

1.app.module.ts 应用程序根模块。注意此处我们没有在Providers中注册loggerService。当然注册了通过后面的方法也可以达到我们的目的。

import { NgModule, Optional, SkipSelf, ReflectiveInjector} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

/* App Root */
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { Title } from '@angular/platform-browser';
import {MessagesModule, GrowlModule, ButtonModule}from 'primeng/primeng';
import {AppDetailComponent}from './app-detail.component';
import {AppDetailListComponent}from './app-detailList.component';
import {LoggerService}from './logger.service';
let allTitle:string="郭志奇";

@NgModule({
 imports: [
 BrowserModule,
 MessagesModule,
 GrowlModule, ButtonModule
 ],
 declarations: [AppComponent, AppDetailComponent, AppDetailListComponent],//声明当前模块需要的指定 组件信息
 exports: [],
 providers: [Title],
 bootstrap: [AppComponent]
})
export class AppModule {
 constructor( @Optional() @SkipSelf() parentModule: AppModule) {
 console.log(parentModule);
 if (parentModule) {
  throw new Error(
  'AppModule is already loaded. Import it in the AppModule only');
 }
 }
}

2.app.component.ts  应用程序根组件

import { Component, ViewEncapsulation, Host, ViewContainerRef, ReflectiveInjector } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Message } from 'primeng/primeng';
import {LoggerService}from './logger.service';
@Component({
 selector: 'my-app',
 moduleId: module.id,
 templateUrl: './app.component.html',
 providers: [
  { provide: LoggerService, useClass: LoggerService }
 ]
})
export class AppComponent {
 subtitle = '(Final)';
 private msgs: Message[];
 constructor(private title: Title, @Host() private logger: LoggerService) {
  this.title.setTitle("AppComponent");
 }

 show(): void {
  this.logger.Debug();
 }
}

请注意,我们在跟组件中providers中注册了LoggerService。

3.app.detailList.ts  日志列表中providers中也注册了LoggerService

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';

@Component({
 selector: 'my-detailList',
 templateUrl: './app-detailList.component.html',
 moduleId: module.id,
 providers: [
  { provide: LoggerService, useClass: LoggerService }
 ]
})

export class AppDetailListComponent {
 constructor( private logger: LoggerService) {

 }
 show(): void {
  this.logger.Debug();
 }

}

 4.app.detail.ts  日志组件providers没有注册LoggerService。

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';
@Component({
 selector: 'detail',
 moduleId: module.id,
 templateUrl: './app-detail.component.html',
 providers: [
  // { provide: LoggerService, useClass: LoggerService }
 ]
})

export class AppDetailComponent {
 constructor( private logger: LoggerService) {

 }
 show(): void {
  this.logger.Debug();
 }

}

 现在我们通过chrome来看一下 LoggerService的层级关系。

Angular2 多级注入器详解及实例Angular2 多级注入器详解及实例

 Angular2 多级注入器详解及实例

通过查看依赖关系图,我们可以看到AppComponent组件使用了单独的LoggerService,DetailList组件也使用单独的LoggerService 实例,而Detail组件使用的是父组件DetailList的LoggerService实例。

目前来看没有达到我们的要求,我们的要求是每个组件都有单独的LoggerService实例,那么我们假设Detail组件的providers是我们忘记输入的,很难测试出原因所在。那么我们加入一个@Host()来限制注入器的查找范围。

对于注入器的向上查找方式,请参考官方文档。

为了便于调试,我们加入@Host().

@Host 装饰器将把往上搜索的行为截止在 宿主组件

detail.ts 提示detail组件加入@Host()装饰器

import {Component, Host}from '@angular/core';
import {LoggerService}from './logger.service';
@Component({
 selector: 'detail',
 moduleId: module.id,
 templateUrl: './app-detail.component.html',
 providers: [
  // { provide: LoggerService, useClass: LoggerService }
 ]
})

export class AppDetailComponent {
 constructor( @Host() private logger: LoggerService) {

 }
 show(): void {
  this.logger.Debug();
 }

}

Angular2 多级注入器详解及实例

会提示找不到LoggerService的实例,@Host()的作用就是限制注入器查找到当前组件就停止,不会继续往上查找。所以会出现找不到Providers的错误。

加上providers 的结果就是我们想要的了。

 Angular2 多级注入器详解及实例

完美的解决了多组件使用单独服务实例的问题。

 总结:

1.如果要使组件单独使用服务,那么首先要在providers 中单独注册该服务。很容易理解

2.为了更好的检测可能出现的问题,在组件服务上加入@Host()装饰器,可以尽量早的抛出错误信息

3.使用ng2的debug工具

4.要明确各组件之间的关系,因为不同的组件关系会导致服务的实例的不同

5.服务尽量是模块级,不是应用级。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
Javascript 跨域知识详细介绍
Oct 30 #Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 #Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 #Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 #Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 #Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 #Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 #Javascript
You might like
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
JS日历 推荐
2006/12/03 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python完全新手教程
2007/02/08 Python
python re正则表达式模块(Regular Expression)
2014/07/16 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
家长对老师的感言
2014/03/11 职场文书
企业公益活动策划方案
2014/08/24 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python