Angular2 多級注入器詳解及實例

更新時間：2016年10月30日 09:47:53 投稿：lqh

這篇文章主要介紹了Angular2 多級注入器詳解的相關(guān)資料,并附簡單實例代碼，需要的朋友可以參考下

angular2 的依賴注入包含了太多的內(nèi)容，其中的一個重點就是注入器，而注入器又非常難理解，今天我們不深入介紹注入器的內(nèi)容，可以參考官方文檔，我們今天來說注入器的層級。

也就是組件獲取服務(wù)的容器會選擇具體哪一個。

先簡單介紹一個背景：有3個組件AppComponent 根組件、DetailList組件 ( 日志列表組件)、Detail組件( 日志組件)。

這三個組件會形成一個組件樹，對應(yīng)的我們也可以認(rèn)為每個組件都會有一個獨立的注入器(有時候不會出現(xiàn)，但是可以這么認(rèn)為)。

加入一個日志服務(wù)LoggerService，如果按照我們普通的入門方式，在根模塊providers 中提供LoggerService。那么在整個應(yīng)用程序中，LoggerService只有一個實例，什么意思呢？就是說無論在哪個組件，獲取到的都是首次創(chuàng)建的LoggerService，所有組件共用一個服務(wù)實例，這有時候會是一個有用的特性，比如我們使用的全局配置。

全局唯一不是我們這次要驗證的重點，因為這個太普通，我們這次要說明的是我們?nèi)绾卧诿總€組件中都獲取單獨的LoggerService實例，即每個組件的實例都不同。這個就需要對ng2的依賴注入有所了解才可以。

我們逐步來說明如何實現(xiàn)？

為了便于看到這篇短文的同學(xué)有所了解，我加入一些基礎(chǔ)代碼。

1.app.module.ts 應(yīng)用程序根模塊。注意此處我們沒有在Providers中注冊loggerService。當(dāng)然注冊了通過后面的方法也可以達(dá)到我們的目的。

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],//聲明當(dāng)前模塊需要的指定 組件信息
 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 應(yīng)用程序根組件

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();
 }

}

現(xiàn)在我們通過chrome來看一下 LoggerService的層級關(guān)系。

通過查看依賴關(guān)系圖，我們可以看到AppComponent組件使用了單獨的LoggerService，DetailList組件也使用單獨的LoggerService 實例，而Detail組件使用的是父組件DetailList的LoggerService實例。

目前來看沒有達(dá)到我們的要求，我們的要求是每個組件都有單獨的LoggerService實例，那么我們假設(shè)Detail組件的providers是我們忘記輸入的，很難測試出原因所在。那么我們加入一個@Host()來限制注入器的查找范圍。

對于注入器的向上查找方式，請參考官方文檔。

為了便于調(diào)試，我們加入@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();
 }

}