Używanie serwisu w Angular

W poprzedniej lekcji stworzyliśmy nasz własny serwis DataService. Teraz zaimportujmy go do komponentu:

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

W dekoratorze @Component we właściwości providers należy wskazać nasz serwis:

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

Teraz skorzystamy ze specjalnego podejścia, które nazywa się wstrzykiwanie zależności (dependency injection). Jego istota polega na tym, że w konstruktorze komponentu możemy przekazać nasz serwis jako parametr i automatycznie trafi on do prywatnej właściwości naszego komponentu. Spójrzcie w kodzie:

export class AppComponent {
	constructor(private dataService: DataService) { // wstrzykujemy zależność
		console.log(this.dataService); // serwis w prywatnej właściwości
	}
}

Wstrzykiwanie dla naszego serwisu działa, ponieważ wcześniej zastosowaliśmy do niego dekorator Injectable.

Teraz w konstruktorze klasy komponentu pobierzmy dane z naszego serwisu, wywołując odpowiednią metodę:

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

Wyświetlmy pobrane dane w templacie komponentu:

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

Pobierz produkty z Twojego serwisu w komponencie i wyświetl je w templacie komponentu.

Stwórz w Twoim serwisie metodę do dodawania nowego produktu. W komponencie zrób przycisk, po kliknięciu którego będzie dodawany nowy produkt.

Stwórz formularz z dwoma polami input i przyciskiem, po naciśnięciu którego będzie dodawany nowy produkt.