快捷導(dǎo)航

Angular2 多級(jí)注入器詳解及實(shí)例

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

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

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

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

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

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

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

全局唯一不是我們這次要驗(yàn)證的重點(diǎn)，因?yàn)檫@個(gè)太普通，我們這次要說(shuō)明的是我們?nèi)绾卧诿總€(gè)組件中都獲取單獨(dú)的LoggerService實(shí)例，即每個(gè)組件的實(shí)例都不同。這個(gè)就需要對(duì)ng2的依賴(lài)注入有所了解才可以。

我們逐步來(lái)說(shuō)明如何實(shí)現(xiàn)？

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

1.app.module.ts 應(yīng)用程序根模塊。注意此處我們沒(méi)有在Providers中注冊(cè)loggerService。當(dāng)然注冊(cè)了通過(guò)后面的方法也可以達(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();
 }
}

請(qǐng)注意，我們?cè)诟M件中providers中注冊(cè)了LoggerService。

3.app.detailList.ts 日志列表中providers中也注冊(cè)了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沒(méi)有注冊(cè)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)在我們通過(guò)chrome來(lái)看一下 LoggerService的層級(jí)關(guān)系。

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

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

對(duì)于注入器的向上查找方式，請(qǐng)參考官方文檔。

為了便于調(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();
 }

}