Gebruik van 'n diens in Angular

In die vorige les het ons ons eie diens DataService geskep. Kom ons voer dit nou in die komponent in:

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

In die dekorateur @Component moet ons ons diens in die eienskap providers spesifiseer:

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

Nou sal ons 'n spesiale benadering gebruik, genoem afhanklikheidsinplasing (dependency injection). Die kern daarvan is dat ons in die konstruktor van die komponent ons diens as 'n parameter kan deurgee en dit sal outomaties in die private eienskap van ons komponent beland. Kyk in die kode:

export class AppComponent {
	constructor(private dataService: DataService) { // plaas afhanklikheid in
		console.log(this.dataService); // diens in private eienskap
	}
}

Inplasing vir ons diens werk, aangesien ons vroeër die dekorateur Injectable daarop toegepas het.

Kom ons kry nou data van ons diens in die konstruktor van die komponentklas deur die ooreenstemmende metode te roep:

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

Kom ons vertoon die verkryde data in die templaat van die komponent:

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

Kry produkte uit jou diens in die komponent en vertoon hulle in die templaat van die komponent.

Maak 'n metode in jou diens om 'n nuwe produk by te voeg. Maak 'n knoppie in die komponent, waarop 'n klik 'n nuwe produk sal byvoeg.

Maak 'n vorm met twee invoervelde en 'n knoppie, waarop 'n druk 'n nuwe produk sal byvoeg.