Angular 的 "dependency injection"

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

Angular 的注入器系統(tǒng)是分層級(jí)的，也被稱為 "hierarchical injector"。這意味著你可以在不同的層級(jí)創(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)用只會(huì)有一個(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 都會(huì)是這個(gè)新的實(shí)例，而不是在 AppModule 中提供的單例。

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

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

最新評(píng)論