Përdorimi i shërbimit në Angular

Në mësimin e mëparshëm krijuam shërbimin tonë të personalizuar DataService. Tani le ta importojmë atë në komponent:

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

Në dekoratorin @Component në vetinë providers duhet të specifikojmë shërbimin tonë:

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

Tani do të përdorim një qasje të veçantë, që quhet injektim i varësisë (dependency injection). Thelbi i saj qëndron në faktin se në konstruktorin e komponentit ne mund ta kalojmë shërbimin tonë si parametër dhe ai automatikisht do të përfundojë në vetinë private të komponentit tonë. Shikoni në kod:

export class AppComponent {
	constructor(private dataService: DataService) { // injektojmë varësinë
		console.log(this.dataService); // shërbimi në vetinë private
	}
}

Injektimi për shërbimin tonë funksionon, sepse më parë i kemi aplikuar atij dekoratorin Injectable.

Tani le të marrim të dhënat nga shërbimi ynë në konstruktorin e klasës së komponentit, duke thirrur metodën përkatëse:

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

Le të shfaqim të dhënat e marra në template e komponentit:

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

Merrni produktet nga shërbimi juaj në komponent dhe shfaqini ato në template e komponentit.

Krijoni në shërbimin tuaj një metodë për shtimin e një produkti të ri. Në komponent krijoni një buton, me klikim në të cilin do të shtohet një produkt i ri.

Krijoni një formë me dy inpute dhe një buton, me shtypje në të cilin do të shtohet një produkt i ri.