快捷導(dǎo)航

Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化

更新時(shí)間：2023年10月29日 14:50:38 作者：JerryWang_汪子熙

這篇文章主要為大家介紹了Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Angular 的 "dependency injection"

Angular 的 "dependency injection" 是一種設(shè)計(jì)模式，它可以幫助我們更有效地組織和共享代碼。在 Angular 中，我們可以通過注入服務(wù)（一個(gè)常見的可注入對象類型）到組件、指令或其他服務(wù)中，實(shí)現(xiàn)代碼的復(fù)用和模塊化。

Angular 的注入器系統(tǒng)是分層級的，也被稱為 "hierarchical injector"。這意味著你可以在不同的層級創(chuàng)建和注入服務(wù)，從而決定它們的作用范圍和共享行為。

工作原理

舉個(gè)例子，假設(shè)你有一個(gè) LoggerService 用于記錄應(yīng)用的日志信息。你可以在應(yīng)用的根模塊 AppModule 中提供這個(gè)服務(wù)：

import { LoggerService } from './logger.service';
@NgModule({
  providers: [ LoggerService ],
  ...
})
export class AppModule { }

這樣，LoggerService 就成了一個(gè)單例服務(wù)，整個(gè)應(yīng)用只會有一個(gè) LoggerService 實(shí)例。你可以在任何需要的地方注入這個(gè)服務(wù)：

import { LoggerService } from './logger.service';
@Component({
  ...
})
export class SomeComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Hello World!');
  }
}

然而，有時(shí)候你可能希望在某個(gè)特定的組件及其子組件中使用一個(gè)獨(dú)立的 LoggerService 實(shí)例。這時(shí)，你就可以在那個(gè)組件的元數(shù)據(jù)中提供 LoggerService：

import { LoggerService } from './logger.service';
@Component({
  providers: [ LoggerService ],
  ...
})
export class SomeSpecificComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Hello Specific World!');
  }
}

在這種情況下，SomeSpecificComponent 及其所有子組件中注入的 LoggerService 都會是這個(gè)新的實(shí)例，而不是在 AppModule 中提供的單例。

這就是 Angular 的 "hierarchical injector" 的工作原理。每個(gè)注入器都有一個(gè)父注入器，當(dāng)你嘗試在某個(gè)組件中注入服務(wù)時(shí)，Angular 會首先在該組件的注入器中查找該服務(wù)，如果沒找到，就會去父注入器中查找，這個(gè)過程會一直持續(xù)到根注入器。如果在整個(gè)過程中都沒找到該服務(wù)，Angular 就會拋出錯(cuò)誤。

以上就是Angular設(shè)計(jì)模式hierarchical injector實(shí)現(xiàn)代碼復(fù)用模塊化的詳細(xì)內(nèi)容，更多關(guān)于Angular hierarchical injector的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: