Ծառայության օգտագործումը 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>

Ստացեք ապրանքները ձեր ծառայությունից կոմպոնենտում և արտածեք դրանք կոմպոնենտի տեմպլեյթում:

Ձեր ծառայության մեջ ստեղծեք նոր ապրանք ավելացնելու մեթոդ: Կոմպոնենտում ստեղծեք կոճակ, որի վրա կտտացնելիս կավելացվի նոր ապրանք:

Ստեղծեք ֆորմա երկու դաշտով և կոճակով, որի վրա սեղմելիս կավելացվի նոր ապրանք: