コンストラクターベースの依存性の注入

以前のアクティビティでは、inject()関数を用いてリソースをコンポーネントに「提供」することで、リソースをコンポーネントで使用できるようにしていました。inject()関数は、依存性の注入のパターンの1つです。コンストラクターベースの依存性の注入という別の注入パターンも存在することを知っておくことは重要です。

コンストラクターベースの依存性の注入では、コンポーネントのconstructor関数にパラメータとしてリソースを指定します。Angularは、これらのリソースをコンポーネントで使用できるようにします。

このアクティビティでは、コンストラクターベースの依存性の注入の使い方を学びます。

サービスやその他の注入可能なリソースをコンポーネントに注入するには、以下の構文を使用します。

      
@Component({...})class PetCarDashboardComponent {    constructor(private petCareService: PetCareService) {        ...    }}
    

ここで注意すべき点がいくつかあります。

• privateキーワードを使用します。
• petCareServiceは、クラスで使用できるプロパティになります。
• PetCareServiceクラスは、注入されるクラスです。

それでは、実際に試してみましょう。

1. コンストラクタベースのDIを使用するようにコードを更新する

   app.component.tsで、以下のコードに合わせてコンストラクターコードを更新します。

   ヒント：詰まってしまった場合は、この演習ページの例を参照してください。

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

このアクティビティの完了、おめでとうございます。例となるコードは、inject関数を使った場合と同じように動作します。これらの2つのアプローチはほぼ同じですが、このチュートリアルでは説明できない小さな違いがいくつかあります。

依存性の注入の詳細については、Angularドキュメントを参照してください。