Penggunaan Perkhidmatan dalam Angular

Dalam pelajaran sebelumnya, kita telah mencipta perkhidmatan DataService kita sendiri. Sekarang mari importnya ke dalam komponen:

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

Dalam dekorator @Component, dalam sifat providers, kita perlu nyatakan perkhidmatan kita:

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

Sekarang kita akan menggunakan pendekatan khas, yang dipanggil suntikan kebergantungan (dependency injection). Intipatinya terletak pada fakta bahawa dalam pembina komponen kita boleh menghantar perkhidmatan kita sebagai parameter dan ia akan secara automatik masuk ke dalam sifat peribadi komponen kita. Lihat dalam kod:

export class AppComponent {
	constructor(private dataService: DataService) { // menyuntik kebergantungan
		console.log(this.dataService); // perkhidmatan dalam sifat peribadi
	}
}

Suntikan untuk perkhidmatan kita berfungsi, kerana kita sebelum ini telah menggunakan dekorator Injectable padanya.

Sekarang mari dalam pembina kelas komponen dapatkan data dari perkhidmatan kita, dengan memanggil kaedah yang berkenaan:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

Mari kita paparkan data yang diperoleh dalam templat komponen:

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

Dapatkan barang dari perkhidmatan anda dalam komponen dan paparkannya dalam templat komponen.

Buat dalam perkhidmatan anda satu kaedah untuk menambah barang baru. Dalam komponen, buat satu butang, yang apabila diklik akan menambah barang baru.

Buat satu borang dengan dua input dan butang, yang apabila ditekan akan menambah barang baru.