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

2019-11-20 08:38:00

字體：大中小

供稿：網(wǎng)友

angular2 的依賴注入包含了太多的內(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)說(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ò)查看依賴關(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(); }}