Brug af en service i Angular

I den forrige lektion oprettede vi vores egen service DataService. Lad os nu importere den til komponenten:

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

I dekoratøren @Component i egenskaben providers skal vi angive vores service:

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

Nu vil vi bruge en speciel tilgang, der kaldes afhængighedsinjektion (dependency injection). Dens essens består i, at vi i komponentens konstruktor kan give vores service som en parameter, og den vil automatisk blive tilgængelig som en privat egenskab i vores komponent. Se i koden:

export class AppComponent {
	constructor(private dataService: DataService) { // injicerer afhængighed
		console.log(this.dataService); // service i privat egenskab
	}
}

Injektion for vores service fungerer, fordi vi tidligere har anvendt dekoratøren Injectable på den.

Lad os nu i komponentklassens konstruktor hente data fra vores service ved at kalde den tilsvarende metode:

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

Lad os vise de modtagne data i komponentens template:

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

Hent varerne fra din service i komponenten og vis dem i komponentens template.

Lav en metode i din service til at tilføje en ny vare. I komponenten, lav en knap, der ved klik tilføjer en ny vare.

Lav en form med to inputfelter og en knap, der ved tryk vil tilføje en ny vare.