სერვისის გამოყენება 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>

მიიღეთ ნივთები თქვენი სერვისიდან კომპონენტში და გამოსახეთ ისინი კომპონენტის თემფლეიტში.

გააკეთეთ თქვენს სერვისში მეთოდი ახალი ნივთის დასამატებლად. კომპონენტში გააკეთეთ ღილაკი, რომლის დაწკაპებითაც დაემატება ახალი ნივთი.

გააკეთეთ ფორმა ორი ინფუთით და ღილაკით, რომლის დაჭერითაც დაემატება ახალი ნივთი.