Angularでのサービス使用

前のレッスンでは、独自のサービス DataServiceを作成しました。 それでは、これをコンポーネントにインポートしてみましょう:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // ここ

デコレータ @Component のプロパティ providers に、私たちのサービスを指定する必要があります:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // ここ
})

ここで、依存性の注入 (dependency injection) と呼ばれる特別なアプローチを利用します。 その本質は、コンポーネントのコンストラクタでサービスをパラメータとして渡すことができ、 それが自動的にコンポーネントのプライベートプロパティに格納されることにあります。 コードをご覧ください:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // 依存性を注入
    console.log(this.dataService); // サービスはプライベートプロパティ内
  }
}

依存性の注入が私たちのサービスに対して機能するのは、 以前にデコレータ Injectable を適用したためです。

では、コンポーネントクラスのコンストラクタ内で、 対応するメソッドを呼び出してサービスからデータを取得しましょう:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

取得したデータをコンポーネントのテンプレートに出力してみましょう:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>