Použitie servisu v Angular

V predchádzajúcej lekcii sme vytvorili našu vlastnú servisu DataService. Poďme ju teraz importovať do komponentu:

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

V dekorátori @Component vo vlastnosti providers je potrebné uviesť našu servisu:

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

Teraz využijeme špeciálny prístup, ktorý sa nazýva dependency injection (dependency injection). Jeho podstata spočíva v tom, že v konštruktori komponentu môžeme odovzdať našu servisu parametrom a automaticky sa dostane do súkromnej vlastnosti nášho komponentu. Pozrite sa v kóde:

export class AppComponent {
	constructor(private dataService: DataService) { // injectujeme závislosť
		console.log(this.dataService); // servisa v súkromnej vlastnosti
	}
}

Dependency injection pre našu servisu funguje, pretože sme na ňu predtým aplikovali dekorátor Injectable.

Poďme teraz v konštruktore triedy komponentu získať dáta z našej servisy, volaním príslušnej metódy:

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

Poďme získať dáta zobraziť v template komponentu:

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

Získajte tovary z vašej servisy v komponente a zobrazte ich v template komponentu.

Vykonite vo vašej servise metódu na pridanie nového tovaru. V komponente vytvorte tlačidlo, na ktoré kliknutie sa pridá nový tovar.

Vytvorte formulár s dvoma inputmi a tlačidlom, na ktoré stlačenie sa pridá nový tovar.