Servisdən istifadə Angular-da

Əvvəlki dərsdə biz öz xüsusi servisimizi DataService yaratdıq. Gəlin indi onu komponentə import edək:

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

@Component dekoratorunda providers xassəsində bizim servisimizi göstərmək lazımdır:

@Component({
	.....
	providers: [ DataService ] // burada
})

İndi biz xüsusi bir yanaşmadan istifadə edəcəyik, buna asılılıq əlavə etmə (dependency injection) deyilir. Onun mahiyyəti ondan ibarətdir ki, komponentin konstruktorunda biz servisimizi parametr kimi ötürə bilərik və o avtomatik olaraq komponentimizin gizli xassəsinə daxil olacaq. Koda baxın:

export class AppComponent {
	constructor(private dataService: DataService) { // asılılığı əlavə edirik
		console.log(this.dataService); // servis gizli xassədə
	}
}

Bizim servisimiz üçün asılılığın əlavə edilməsi işləyir, çünki biz əvvəllər ona Injectable dekoratorunu tətbiq etmişik.

Gəlin indi komponent sinfinin konstruktorunda servisimizdən məlumatları əldə edək, uyğun metodu çağıraraq:

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

Gəlin əldə edilmiş məlumatları komponentin şablonunda çıxaraq:

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

Servisinizdən məhsulları komponentdə əldə edin və onları komponentin şablonunda çıxarın.

Servisinizdə yeni məhsul əlavə etmək üçün metod edin. Komponentdə kliklənəndə yeni məhsul əlavə ediləcək düymə edin.

İki input və düymə ilə forma edin, klikləndikdə yeni məhsul əlavə edilsin.