Angularでのサービスの作成

サービスについて、自分自身で作成することから始めましょう。そのために、フォルダ test/src/appにファイル data.service.tsを作成します。私たちのサービスは、いくつかのデータを画面に表示する役割を担うことにしましょう。

サービスのためのクラスを作成します：

data.service.tsexport class DataService {
  
}

ここで、デコレータ Injectableが必要です。 これを使用することで、サービスクラスをコンポーネントクラスに注入できるようになります。注入については次のレッスンで説明します。今は必要なデコレータをインポートしましょう：

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

このデコレータをクラスに適用します：

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

次に、このクラスにいくつかのデータを持たせるようにします。 通常、Angularアプリケーションではサーバーからデータをロードしますが、学習目的のため配列を使用します。プライベートプロパティとして作成しましょう：

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

データを取得するためのメソッドを作成します：

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

私たちのサービスは準備ができました。次のレッスンでは、これをコンポーネントクラスに接続します。

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]