Erstellen eines Services in Angular

Lassen Sie uns das Studium der Services mit der Erstellung eines eigenen beginnen. Dazu erstellen wir im Ordner test/src/app die Datei data.service.ts. Unser Service soll für die Ausgabe einiger Daten auf dem Bildschirm verantwortlich sein.

Erstellen wir eine Klasse für unseren Service:

export class DataService {
	
}

Jetzt benötigen wir den Dekorator Injectable. Seine Anwendung ermöglicht es, dass die Serviceklass in eine Komponentenklasse eingebettet werden kann. Über die Einbettung sprechen wir in der nächsten Lektion. Importieren wir zunächst den benötigten Dekorator:

import { Injectable } from '@angular/core';

export class DataService {
	
}

Wenden wir ihn auf unsere Klasse an:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	
}

Jetzt sorgen wir dafür, dass in unserer Klasse einige Daten vorhanden sind. Normalerweise in Angular-Anwendungen werden Daten vom Server geladen, aber wir werden zu Lernzwecken ein Array verwenden. Erstellen wir es in einer privaten Eigenschaft:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Schreiben wir nun eine Methode zum Abrufen der Daten:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Unser Service ist fertig. In der nächsten Lektion werden wir ihn mit der Komponentenklasse verbinden.

Erstellen Sie Ihren eigenen Service, der ein Array mit Produktobjekten zurückgibt:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]