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();
	}
}

Алынған деректерді компоненттің шаблонында шығарайық:

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

Компоненттегі сервисіңізден тауарларды алыңыз да, оларды компоненттің шаблонында шығарыңыз.

Сервисіңізде жаңа тауар қосу үшін әдіс жасаңыз. Компонентте түйме жасаңыз, оған басқанда жаңа тауар қосылады.

Екі енгізу және түймесі бар пішім жасаңыз, түймені басқанда жаңа тауар қосылады.