Angularでのサービス使用

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

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

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

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

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

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

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

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

export class AppComponent {
	public data: string[] = [];

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

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

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

コンポーネント内で、あなたのサービスから商品を取得し、コンポーネントのテンプレートに出力してください。

あなたのサービスに、新しい商品を追加するメソッドを作成してください。コンポーネントにボタンを作成し、クリックすると新しい商品が追加されるようにしてください。

2つの入力フィールドとボタンを持つフォームを作成してください。ボタンを押すと、新しい商品が追加されるようにしてください。