インジェクトベースの依存性の注入

注入可能なサービスを作成することは、Angularの依存性の注入 (DI) システムの最初の部分です。サービスをコンポーネントにどのように注入するか？Angularには、適切なコンテキストで使用できる便利な関数 inject() があります。

このアクティビティでは、サービスを注入してコンポーネントで使用する方法を学びます。

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>`,
       

初めてサービスをコンポーネントに注入できました。素晴らしい取り組みです。