Användning av en tjänst i Angular

I föregående lektion skapade vi vår egen tjänst DataService. Låt oss nu importera den till komponenten:

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

I dekoratören @Component i egenskapen providers måste vi ange vår tjänst:

@Component({
	.....
	providers: [ DataService ] // här
})

Nu kommer vi att använda ett speciellt tillvägagångssätt, som kallas dependency injection (dependency injection). Kärnan i det är att vi i komponentens konstruktor kan skicka vår tjänst som en parameter och den kommer automatiskt hamna i komponentens privata egenskap. Se i koden:

export class AppComponent {
	constructor(private dataService: DataService) { // injicerar beroendet
		console.log(this.dataService); // tjänsten i den privata egenskapen
	}
}

Injektion för vår tjänst fungerar eftersom vi tidigare applicerade dekoratören Injectable på den.

Låt oss nu i klassens konstruktor hämta data från vår tjänst, genom att anropa motsvarande metod:

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

Låt oss visa den hämtade datan i komponentens template:

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

Hämta produkterna från din tjänst i komponenten och visa dem i komponentens template.

Skapa en metod i din tjänst för att lägga till en ny produkt. I komponenten, skapa en knapp som, när man klickar på den, lägger till en ny produkt.

Skapa ett formulär med två inputfält och en knapp, vars tryckning kommer att lägga till en ny produkt.