Verwendung eines Services in Angular

In der vorherigen Lektion haben wir unseren eigenen Service DataService erstellt. Lassen Sie uns diesen nun in die Komponente importieren:

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

Im Dekorator @Component muss in der Eigenschaft providers unser Service angegeben werden:

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

Nun werden wir einen speziellen Ansatz verwenden, der Dependency Injection (dependency injection) genannt wird. Seine Essenz besteht darin, dass wir im Konstruktor der Komponente unseren Service als Parameter übergeben können und er automatisch in eine private Eigenschaft unserer Komponente gelangt. Sehen Sie im Code:

export class AppComponent {
	constructor(private dataService: DataService) { // Dependency Injection
		console.log(this.dataService); // Service in der privaten Eigenschaft
	}
}

Die Injection für unseren Service funktioniert, da wir zuvor den Dekorator Injectable auf ihn angewendet haben.

Lassen Sie uns nun im Konstruktor der Komponentenklasse Daten aus unserem Service abrufen, indem wir die entsprechende Methode aufrufen:

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

Lassen Sie uns die erhaltenen Daten im Template der Komponente ausgeben:

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

Rufen Sie die Produkte aus Ihrem Service in der Komponente ab und geben Sie sie im Template der Komponente aus.

Erstellen Sie in Ihrem Service eine Methode zum Hinzufügen eines neuen Produkts. Erstellen Sie in der Komponente eine Schaltfläche, bei deren Klick ein neues Produkt hinzugefügt wird.

Erstellen Sie ein Formular mit zwei Input-Feldern und einer Schaltfläche, bei deren Betätigung ein neues Produkt hinzugefügt wird.