Erstellen Eines Benutzerdefinierten Dienstes in Angular
Erstellen eines Service
Angular stellt einen praktischen CLI-Befehl zur Verfügung, um schnell einen Service zu generieren, der die erforderlichen Dateien und Importe einrichtet:
Nach Ausführung dieses Befehls erstellt Angular zwei Dateien:
-
task.service.ts— die eigentliche Service-Datei; -
task.service.spec.ts— eine Testdatei (diese kann gelöscht werden).
Hier ist der anfängliche Inhalt von task.service.ts:
task-service.ts
Der @Injectable-Decorator weist Angular an, dass dieser Service in andere Klassen injiziert werden kann.
Der Teil providedIn: 'root' bedeutet, dass Angular den Service automatisch im Root-Modul registriert und eine einzige Instanz davon für die gesamte Anwendung erstellt.
Singleton ist ein Entwurfsmuster, das sicherstellt, dass eine Klasse nur eine Instanz besitzt und einen globalen Zugriffspunkt darauf bereitstellt.
Komponente A, Komponente B oder jede andere Komponente – alle erhalten dieselbe Instanz des Service. Das ist äußerst praktisch, da gemeinsam genutzte Daten (wie eine Aufgabenliste) gespeichert und doppelte Logik vermieden werden kann.
Deshalb wird ein Service zur einzigen Quelle der Wahrheit für einen bestimmten Teil der Logik oder Daten Ihrer Anwendung. Wenn Sie neugierig sind, können Sie mehr über das Singleton-Muster in diesem Artikel erfahren.
Hinzufügen von Logik zum Service
Kommen wir nun dazu, die eigentliche Logik für Ihren Service zu erstellen. Folgendes soll der Service leisten:
-
Speichern einer Liste von Aufgaben;
-
Zurückgeben der Aufgabenliste;
-
Löschen von Aufgaben;
-
Umschalten des Erledigt-Status von Aufgaben.
Zunächst definieren wir, wie eine Aufgabe aussieht, indem wir ein TypeScript-Interface erstellen:
task-interface.ts
Dieses Interface definiert klar die Struktur einer Aufgabe — es enthält eine id, einen Titel und einen Status für die Erledigung. Sie haben bisher noch keine Interfaces verwendet, aber das Hinzufügen eines solchen macht den Code verständlicher und leichter wartbar.
Nun erstellen wir den Service, der Ihre Aufgabenliste verwaltet:
task-service.ts
In diesem Beispiel werden die Aufgabendaten direkt im Code in einem privaten tasks-Array gespeichert.
Um anderen Teilen der Anwendung den Zugriff auf die Aufgabenliste zu ermöglichen, wird die Methode getTasks() verwendet. Sie gibt eine Kopie des Arrays mit der Spread-Syntax ([...]) zurück, was dazu beiträgt, die Originaldaten vor unbeabsichtigten Änderungen zu schützen.
Die Methode deleteTask(id: number) entfernt eine Aufgabe, indem sie diejenige mit der passenden ID herausfiltert und die Liste aktualisiert.
Eine weitere wichtige Methode ist toggleTaskStatus(id: number). Sie sucht die Aufgabe anhand ihrer ID und wechselt den Status der Fertigstellung — war die Aufgabe als erledigt (true) markiert, wird sie auf unerledigt (false) gesetzt und umgekehrt.
Ein Großteil dieser Logik dürfte Ihnen aus Ihrer TaskListComponent bekannt vorkommen. Nun ist sie vollständig in den TaskService ausgelagert, was Ihre Komponenten übersichtlicher macht und die Logik an einem Ort bündelt.
Dieser Service bildet nun die Grundlage, die es Ihren Komponenten ermöglicht, mit der Aufgabenliste zu interagieren – ohne Logik zu duplizieren.
1. Warum erstellt man einen Service in Angular?
2. Was bedeutet providedIn: 'root' im @Injectable-Dekorator?
3. Warum wird in [...this.tasks] this.tasks zurückgegeben und nicht einfach getTasks()?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to use this service inside a component?
What does the task interface look like in code?
Why is it important to return a copy of the tasks array instead of the original?
Awesome!
Completion rate improved to 3.13Erstellen Eines Benutzerdefinierten Dienstes in Angular
Swipe um das Menü anzuzeigen
Erstellen eines Service
Angular stellt einen praktischen CLI-Befehl zur Verfügung, um schnell einen Service zu generieren, der die erforderlichen Dateien und Importe einrichtet:
Nach Ausführung dieses Befehls erstellt Angular zwei Dateien:
-
task.service.ts— die eigentliche Service-Datei; -
task.service.spec.ts— eine Testdatei (diese kann gelöscht werden).
Hier ist der anfängliche Inhalt von task.service.ts:
task-service.ts
Der @Injectable-Decorator weist Angular an, dass dieser Service in andere Klassen injiziert werden kann.
Der Teil providedIn: 'root' bedeutet, dass Angular den Service automatisch im Root-Modul registriert und eine einzige Instanz davon für die gesamte Anwendung erstellt.
Singleton ist ein Entwurfsmuster, das sicherstellt, dass eine Klasse nur eine Instanz besitzt und einen globalen Zugriffspunkt darauf bereitstellt.
Komponente A, Komponente B oder jede andere Komponente – alle erhalten dieselbe Instanz des Service. Das ist äußerst praktisch, da gemeinsam genutzte Daten (wie eine Aufgabenliste) gespeichert und doppelte Logik vermieden werden kann.
Deshalb wird ein Service zur einzigen Quelle der Wahrheit für einen bestimmten Teil der Logik oder Daten Ihrer Anwendung. Wenn Sie neugierig sind, können Sie mehr über das Singleton-Muster in diesem Artikel erfahren.
Hinzufügen von Logik zum Service
Kommen wir nun dazu, die eigentliche Logik für Ihren Service zu erstellen. Folgendes soll der Service leisten:
-
Speichern einer Liste von Aufgaben;
-
Zurückgeben der Aufgabenliste;
-
Löschen von Aufgaben;
-
Umschalten des Erledigt-Status von Aufgaben.
Zunächst definieren wir, wie eine Aufgabe aussieht, indem wir ein TypeScript-Interface erstellen:
task-interface.ts
Dieses Interface definiert klar die Struktur einer Aufgabe — es enthält eine id, einen Titel und einen Status für die Erledigung. Sie haben bisher noch keine Interfaces verwendet, aber das Hinzufügen eines solchen macht den Code verständlicher und leichter wartbar.
Nun erstellen wir den Service, der Ihre Aufgabenliste verwaltet:
task-service.ts
In diesem Beispiel werden die Aufgabendaten direkt im Code in einem privaten tasks-Array gespeichert.
Um anderen Teilen der Anwendung den Zugriff auf die Aufgabenliste zu ermöglichen, wird die Methode getTasks() verwendet. Sie gibt eine Kopie des Arrays mit der Spread-Syntax ([...]) zurück, was dazu beiträgt, die Originaldaten vor unbeabsichtigten Änderungen zu schützen.
Die Methode deleteTask(id: number) entfernt eine Aufgabe, indem sie diejenige mit der passenden ID herausfiltert und die Liste aktualisiert.
Eine weitere wichtige Methode ist toggleTaskStatus(id: number). Sie sucht die Aufgabe anhand ihrer ID und wechselt den Status der Fertigstellung — war die Aufgabe als erledigt (true) markiert, wird sie auf unerledigt (false) gesetzt und umgekehrt.
Ein Großteil dieser Logik dürfte Ihnen aus Ihrer TaskListComponent bekannt vorkommen. Nun ist sie vollständig in den TaskService ausgelagert, was Ihre Komponenten übersichtlicher macht und die Logik an einem Ort bündelt.
Dieser Service bildet nun die Grundlage, die es Ihren Komponenten ermöglicht, mit der Aufgabenliste zu interagieren – ohne Logik zu duplizieren.
1. Warum erstellt man einen Service in Angular?
2. Was bedeutet providedIn: 'root' im @Injectable-Dekorator?
3. Warum wird in [...this.tasks] this.tasks zurückgegeben und nicht einfach getTasks()?
Danke für Ihr Feedback!
