依存性の注入

コンポーネント間でロジックを共有する必要がある場合、Angularは依存性の注入の設計パターンを活用します。これにより、「サービス」を作成できます。サービスを使用すると、コードをコンポーネントに注入しながら、信頼できる唯一の情報源から管理できます。

サービスとは？

サービスは、注入できる再利用可能なコードの断片です。

コンポーネントの定義と同様に、サービスは以下で構成されます。

• @Injectableを使用してクラスをAngularサービスとして宣言するTypeScriptデコレーター。providedInプロパティ（通常は'root'）を使用して、サービスにアクセスできるアプリケーションのどの部分かを定義できます。これにより、サービスをアプリケーション内のどこからでもアクセスできます。
• サービスが注入されたときにアクセスできる目的のコードを定義するTypeScriptクラス

以下は、Calculatorサービスの例です。

import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class Calculator {
  add(x: number, y: number) {
    return x + y;
  }
}

サービスの使用方法

コンポーネントでサービスを使用する場合は、次の手順を実行する必要があります。

1. サービスをインポートする
2. サービスが注入されるクラスフィールドを宣言します。クラスフィールドを、サービスを作成する組み込み関数injectの呼び出しの結果に割り当てます。

以下は、Receiptコンポーネントでの例です。

import {Component, inject} from '@angular/core';
import {Calculator} from './calculator';

@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculator = inject(Calculator);
  totalCost = this.calculator.add(50, 25);
}

この例では、Calculatorは、Angularの関数injectを呼び出してサービスを渡すことによって使用されています。

次のステップ