Paslaugos naudojimas Angular

Ankstesnėje pamokoje mes sukūrėme savo paslaugą DataService. Dabar importuokime ją į komponentą:

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

Decoratoriuje @Component savyje providers reikia nurodyti mūsų paslaugą:

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

Dabar mes panaudosime specialų požiūrį, kuris vadinamas priklausomybių injekavimas (dependency injection). Jo esmė yra ta, kad komponento konstruktoriuje mes galime perduoti mūsų paslaugą kaip parametrą ir ji automatiškai pateks į privatų mūsų komponento savybę. Žiūrėkite kode:

export class AppComponent {
	constructor(private dataService: DataService) { // įleidžiame priklausomybę
		console.log(this.dataService); // paslauga privacioje savybėje
	}
}

Injekavimas mūsų paslaugai veikia, todėl kad mes anksčiau jai pritaikėme decoratorių Injectable.

Dabar komponento klasės konstruktoriuje gaukime duomenis iš mūsų paslaugos, iškviesdami atitinkamą metodą:

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

Atvaizduokime gautus duomenis komponento šablone:

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

Gaukite prekes iš jūsų paslaugos komponente ir atvaizduokite jas komponento šablone.

Jūsų paslaugoje sukurkite metodą naujai prekei pridėti. Komponente sukurkite mygtuką, kurį paspaudus bus pridėta nauja prekė.

Sukurkite formą su dviem įvesties laukais ir mygtuku, kurį paspaudus bus pridėta nauja prekė.