Истифодаи хизматрасонӣ дар Angular

Дар дарси гузашта мо хизматрасонии фармоишии худро сохтем DataService. Ҳоло биёед онро ба компонент ворид кунем:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // ин ҷо

Дар декоратори @Component дар хосиятӣ providers бояд хизматрасонии худро ишора кунем:

@Component({
	.....
	providers: [ DataService ] // ин ҷо
})

Ҳоло мо аз усули махсусе истифода мебарем, ки онро ворид кардани вобастагӣ (dependency injection) меноманд. Махз он иборат аст, ки дар конструктори компонент мо метавонем хизматрасониро параметр гузаронем ва он ба таври худкор ба хосияти хусусии компоненти мо ворид мешавад. Ба код нигаред:

export class AppComponent {
	constructor(private dataService: DataService) { // вобастагиро ворид мекунем
		console.log(this.dataService); // хизматрасонӣ дар хосияти хусусӣ
	}
}

Ворид кардани вобастагӣ барои хизматрасонии мо кор мекунад, зеро мо пештар ба он декоратори Injectable-ро истифода кардем.

Ҳоло биёед дар конструктори синфи компонент маълумотро аз хизматрасонии худ гирем, усули мувофиқро даъват карда:

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

Биёед маълумоти гирифташударо дар template-и компонент чоп кунем:

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

Маҳсулотро аз хизматрасонии худ дар компонент гиред ва онҳоро дар template-и компонент чоп кунед.

Дар хизматрасонии худ усуле барои илова кардани маҳсулоти нав сохта диҳед. Дар компонент тугмае созед, ки пахш кардани он маҳсулоти нав илова карда шавад.

Шакле бо ду воридкунак (input) ва тугма созед, ки пахш кардани он маҳсулоти нав илова карда шавад.