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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
Javascript事件实例详解
Nov 06 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
Vue 项目代理设置的优化
Apr 17 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vuejs移动端实现div拖拽移动
Jul 25 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
实用函数5
2007/11/08 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
python更新列表的方法
2015/07/28 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python对文件操作知识汇总
2016/05/15 Python
python模拟斗地主发牌
2020/04/22 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
天鹅湖观后感
2015/06/09 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
《实心球》教学反思
2016/02/23 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书