コードの共有

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

サービスとは

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

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

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

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

      
import {Injectable} from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class CalculatorService {
  add(x: number, y: number) {
    return x + y;
  }
}
    

サービスの使用方法

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

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

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

      
import { Component } from '@angular/core';
import { CalculatorService } from './calculator.service';
@Component({
  selector: 'app-receipt',
  template: `<h1>合計金額は {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculatorService = inject(CalculatorService);
  totalCost = this.calculatorService.add(50, 25);
}
    

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

次のステップ