Angular2 多级注入器详解及实例

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

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

先简单介绍一个背景：

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

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

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

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

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

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

rush:js;"> 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,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 应用程序根组件

rush:js;"> 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

rush:js;"> import {Component,Host}from '@angular/core'; import {LoggerService}from './logger.service';

@Component({
selector: 'my-detailList',templateUrl: './app-detailList.component.html',useClass: LoggerService }
]
})

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

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

}

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

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

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

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

}

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