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

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

注: 注入コンテキストはこのチュートリアルでは扱いませんが、詳細については Angular ドキュメント を参照してください。

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

DIシステムから提供される値でクラスのプロパティを初期化すると、多くの場合役立ちます。例を以下に示します。

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

1. CarService を注入する

   app.component.ts で、inject() 関数を使用して CarService を注入し、carService という名前のプロパティに割り当てます。

   注: プロパティ carService とクラス CarService の違いに注意してください。

2. carService インスタンスを使用する

   inject(CarService) を呼び出すと、アプリケーションで使用できる CarService のインスタンスが得られます。このインスタンスは carService プロパティに格納されます。

   AppComponent の constructor 関数に、次の実装を追加します。

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

3. AppComponent テンプレートを更新する

   app.component.ts のコンポーネントテンプレートを次のコードで更新します。

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

これで、最初のサービスをコンポーネントに注入しました。素晴らしい成果です。このDIに関するセクションを終了する前に、コンポーネントにリソースを注入する別の構文を学びます。