コンポーネント間でロジックを共有する必要がある場合、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; }}
サービスの使用方法
コンポーネントでサービスを使用する場合は、次の手順を実行する必要があります。
- サービスをインポートする
- サービスが注入されるクラスフィールドを宣言します。クラスフィールドを、サービスを作成する組み込み関数
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を呼び出してサービスを渡すことによって使用されています。