快捷導(dǎo)航

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

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

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

Angular 的 "dependency injection"

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

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

工作原理

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

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

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

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

然而，有時候你可能希望在某個特定的組件及其子組件中使用一個獨立的 LoggerService 實例。這時，你就可以在那個組件的元數(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 都會是這個新的實例，而不是在 AppModule 中提供的單例。

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

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

您可能感興趣的文章: