Angular基于Constructor?Parameter的依賴注入方式詳解

更新時(shí)間：2023年11月26日 09:24:41 作者：JerryWang_汪子熙

這篇文章主要為大家介紹了Angular基于Constructor?Parameter的依賴注入方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Angular 依賴注入

在 Angular 中，依賴注入（Dependency Injection, DI）是一種設(shè)計(jì)模式，用于處理如何在不同的代碼部分創(chuàng)建和傳遞依賴對(duì)象。在 Angular 中，我們通常依賴于 TypeScript 的特性，如構(gòu)造函數(shù)參數(shù)（constructor parameters）來執(zhí)行依賴注入。

構(gòu)造函數(shù)參數(shù)進(jìn)行依賴注入是 Angular DI 系統(tǒng)的一個(gè)重要特性。在 Angular 中，任何類（如服務(wù)、組件、指令等）都可以作為其他類的依賴項(xiàng)。當(dāng) Angular 創(chuàng)建類的實(shí)例時(shí)，它首先查看類的構(gòu)造函數(shù)以決定該類所需要的依賴項(xiàng)。然后，Angular 會(huì)查找這些依賴項(xiàng)，如果找到，就將它們作為參數(shù)傳遞給構(gòu)造函數(shù)，這樣就完成了依賴注入。

以下是一個(gè)簡單的例子，我們創(chuàng)建一個(gè) LoggerService 服務(wù)，它有一個(gè) log 方法。然后在 AppComponent 組件中注入這個(gè)服務(wù)：

import { Injectable } from `@angular/core`;
@Injectable({
  providedIn: `root`,
})
export class LoggerService {
  log(message: string) {
    console.log(`LoggerService: ${message}`);
  }
}
import { Component } from `@angular/core`;
import { LoggerService } from `./logger.service`;
@Component({
  selector: `app-root`,
  templateUrl: `./app.component.html`,
  styleUrls: [`./app.component.css`],
})
export class AppComponent {
  title = `app`;
  constructor(private logger: LoggerService) {
    this.logger.log(`Hello!`);
  }
}

在以上代碼中，AppComponent 組件的構(gòu)造函數(shù)有一個(gè)參數(shù) logger，其類型為 LoggerService。Angular 通過這個(gè)構(gòu)造函數(shù)參數(shù)知道 AppComponent 需要一個(gè) LoggerService 的實(shí)例。因此，當(dāng) Angular 創(chuàng)建 AppComponent 的實(shí)例時(shí)，它會(huì)首先創(chuàng)建一個(gè) LoggerService 的實(shí)例（如果還沒有的話），然后將這個(gè)實(shí)例傳給 AppComponent 的構(gòu)造函數(shù)。

構(gòu)造函數(shù)參數(shù)進(jìn)行依賴注入的優(yōu)點(diǎn)：

代碼解耦：通過依賴注入，我們可以輕松地在不同的類之間共享相同的服務(wù)實(shí)例。這使得代碼更加模塊化和可重用。
測(cè)試方便：在測(cè)試時(shí)，我們可以輕松地為依賴項(xiàng)提供模擬對(duì)象，這使得單元測(cè)試變得更加容易。
對(duì)象的創(chuàng)建和生命周期管理由 Angular 框架處理，開發(fā)者可以更專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。