Angular-da servisden peýdalanmak

Öňki sapakda özümiziň DataService servisimizi döretdik. Indi ony komponente import edeliň:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // şu ýerde

@Component dekoratorynda providers aýratynlygynda biziň servisimizi görkezmeli:

@Component({
	.....
	providers: [ DataService ] // şu ýerde
})

Indi biz aýratyn ýagdaýy ulanarys, baglylygy girizmek (dependency injection) diýilýär. Onuň möhümi şonda, komponentiň konstruktorynda biz servisimizi parametr hökmünde geçirip bileris we ol awtomatik usulda komponentimiziň hususy aýratynlygynda bolar. Koda serediň:

export class AppComponent {
	constructor(private dataService: DataService) { // baglylygy girizýäris
		console.log(this.dataService); // servis hususy aýratynlykda
	}
}

Biziň servisimiz üçin girizmek işleýär, sebäbi biz öň onuň üçin Injectable dekoratoryny ulandy.

Indi komponentiň klasynyň konstruktorynda biziň servisimizden maglumat alyň, degisli usuly çagyryp:

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

Alynan maglumatlary komponentiň şablonunda görkezeliň:

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

Öz servisiňizden önümleri komponentde alyň we olary komponentiň şablonunda görkeziň.

Servisiňizde täze önüm goşmak üçin usul dörediň. Komponentde düwmäni düzüň, basylanda täze önüm goşulmaly.

Iki input we düwme bilen formany düzüň, basylanda täze önüm goşulmaly.