Bruk av tjeneste i Angular

I forrige leksjon opprettet vi vår egen tjeneste DataService. La oss nå 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 egenskapen providers må vi spesifisere vår tjeneste:

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

Nå vil vi bruke en spesiell tilnærming som kalles avhengighetsinjisering (dependency injection). Essensen er at i konstruktøren til komponenten kan vi sende vår tjeneste som en parameter, og den vil automatisk bli plassert i komponentens private egenskap. Se i koden:

export class AppComponent {
	constructor(private dataService: DataService) { // injiserer avhengighet
		console.log(this.dataService); // tjenesten i privat egenskap
	}
}

Avhengighetsinjisering for vår tjeneste fungerer fordi vi tidligere brukte dekoratøren Injectable på den.

La oss nå i konstruktøren til komponentklassen hente data fra vår tjeneste ved å kalle den tilsvarende metoden:

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

La oss vise de hentede dataene i komponentens mal:

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

Hent varene fra din tjeneste i komponenten og vis dem i komponentens mal.

Lag en metode i tjenesten din for å legge til en ny vare. I komponenten, lag en knapp som, når den klikkes, legger til en ny vare.

Lag et skjema med to inndatafelt og en knapp, og ved å trykke på den skal en ny vare legges til.