Uporaba storitve v Angular

V prejšnji lekciji smo ustvarili lastno storitev DataService. Zdaj jo uvozimo v komponento:

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

V dekoratorju @Component v lastnosti providers je treba navesti našo storitev:

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

Zdaj bomo uporabili poseben pristop, ki se imenuje vnašanje odvisnosti (dependency injection). Njegovo bistvo je v tem, da lahko v konstruktorju komponente našo storitev posredujemo kot parameter in ta bo samodejno prenesena v zasebno lastnost naše komponente. Glejte v kodi:

export class AppComponent {
	constructor(private dataService: DataService) { // vnašamo odvisnost
		console.log(this.dataService); // storitev v zasebni lastnosti
	}
}

Vnašanje za našo storitev deluje, ker smo prej nanjo uporabili dekorator Injectable.

Zdaj pa v konstruktorju razreda komponente pridobimo podatke iz naše storitve z klicem ustrezne metode:

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

Pridobljene podatke izpišimo v predlogi komponente:

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

Pridobite izdelke iz vaše storitve v komponenti in jih izpišite v predlogi komponente.

V vaši storitvi naredite metodo za dodajanje novega izdelka. V komponenti naredite gumb, ob kliku na katerega se doda nov izdelek.

Naredite obrazec z dvema vnosnima poljema in gumbom, ob pritisku na katerega se doda nov izdelek.