以 inject 為基礎的依賴注入

建立可注入的服務，是 Angular 依賴注入（DI）系統的第一部分。要如何把服務注入到元件中呢？Angular 有一個方便的函式，稱為 inject()，可以在適當的情境中使用。

NOTE: 注入情境不在本教學的範圍內，但你可以在依賴注入（DI）核心概念指南與 DI 情境指南中進一步了解。

在這個練習中，你將學習如何注入服務並在元件中使用它。

用 DI 系統提供的值來初始化類別屬性，通常很有幫助。範例如下：

@Component({...})
class PetCareDashboard {
  petRosterService = inject(PetRosterService);
}

  1. 注入 CarService

    在 app.ts 中，使用 inject() 函式注入 CarService，並把它指派給一個名為 carService 的屬性

    NOTE: 注意屬性 carService 與類別 CarService 之間的差異。

  2. 使用 carService 實例

    呼叫 inject(CarService) 會給你一個 CarService 的實例，你可以在應用程式中使用它，它存放在 carService 屬性中。

    使用以下實作初始化 display 屬性：

    display = this.carService.getCars().join(' ⭐️ ');

  3. 更新 App 範本

    用以下程式碼更新 app.ts 中的元件範本：

    template: `<p>Car Listing: {{ display }}</p>`,

你剛剛把第一個服務注入到元件中了——表現太出色了。