Service-Injektion in eine Komponente
Sie haben den TaskService erstellt, der das Speichern und Verwalten der Aufgabenliste übernimmt. Der Service selbst interagiert jedoch nicht mit der Benutzeroberfläche. Um die Daten aus dem Service in das Template der Komponente zu bringen, muss der Service in die entsprechende Komponente injiziert werden.
Im Folgenden erfahren Sie, wie Angular mithilfe der Dependency Injection (DI) automatisch Services mit Komponenten verbindet und wie der Service innerhalb der Komponente funktioniert.
Was ist Dependency Injection?
Dependency Injection (DI) ist ein Entwurfsmuster, bei dem Angular die benötigten Abhängigkeiten (wie Services) automatisch in den Konstruktor einer Komponente einfügt.
Dank DI erstellen Komponenten die Service-Instanzen nicht selbst – sie erhalten einfach eine bereits erstellte Instanz. Angular übernimmt die Bereitstellung der benötigten Objekte für alle, die sie benötigen.
Dies funktioniert, weil der Service wie folgt dekoriert ist:
@Injectable({
providedIn: 'root'
})
Dieser Decorator weist Angular an, eine einzelne Instanz (Singleton) des Dienstes für die gesamte Anwendung zu erstellen und sie für DI verfügbar zu machen.
Dienst in eine Komponente injizieren
Nun wird der TaskService in die TaskListComponent injiziert, damit diese auf die Aufgabenliste zugreifen und mit ihr interagieren kann.
So sieht der Code der Komponente aus:
task-list.ts
Wir importieren den TaskService, das Task-Interface sowie weitere für das Template benötigte Komponenten und Module.
Im Konstruktor der Komponente fügen wir den Service mittels Dependency Injection hinzu:
task-list.ts
Der Service wird als privates Feld gespeichert, um ihn in Methoden der Komponente zu verwenden. Direkt nach der Erstellung der Komponente (im Konstruktor) wird die Aufgabenliste abgerufen. Diese Liste wird anschließend im HTML-Template verwendet.
Die Methoden deleteTask und toggleStatus rufen die Funktionen des Service auf, um eine Aufgabe zu löschen oder ihren Status umzuschalten, und aktualisieren anschließend das lokale Array tasks, sodass die Benutzeroberfläche die Änderungen widerspiegelt.
Dieser Ansatz hält die Komponente einfach: Sie weiß nicht, wie die Daten gespeichert oder verarbeitet werden – sie fordert lediglich den Service auf, sie zu aktualisieren. Dadurch werden Verantwortlichkeiten getrennt: Komponenten kümmern sich um die Ansicht, Services um die Daten.
1. Was ist Dependency Injection (DI) in Angular?
2. Warum aktualisieren wir this.tasks nach dem Aufruf von deleteTask oder toggleStatus?
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 show me how to inject a service into a component in Angular?
What does the @Injectable decorator do in Angular services?
Why is it better to keep business logic in a service instead of a component?
Awesome!
Completion rate improved to 3.13Service-Injektion in eine Komponente
Swipe um das Menü anzuzeigen
Sie haben den TaskService erstellt, der das Speichern und Verwalten der Aufgabenliste übernimmt. Der Service selbst interagiert jedoch nicht mit der Benutzeroberfläche. Um die Daten aus dem Service in das Template der Komponente zu bringen, muss der Service in die entsprechende Komponente injiziert werden.
Im Folgenden erfahren Sie, wie Angular mithilfe der Dependency Injection (DI) automatisch Services mit Komponenten verbindet und wie der Service innerhalb der Komponente funktioniert.
Was ist Dependency Injection?
Dependency Injection (DI) ist ein Entwurfsmuster, bei dem Angular die benötigten Abhängigkeiten (wie Services) automatisch in den Konstruktor einer Komponente einfügt.
Dank DI erstellen Komponenten die Service-Instanzen nicht selbst – sie erhalten einfach eine bereits erstellte Instanz. Angular übernimmt die Bereitstellung der benötigten Objekte für alle, die sie benötigen.
Dies funktioniert, weil der Service wie folgt dekoriert ist:
@Injectable({
providedIn: 'root'
})
Dieser Decorator weist Angular an, eine einzelne Instanz (Singleton) des Dienstes für die gesamte Anwendung zu erstellen und sie für DI verfügbar zu machen.
Dienst in eine Komponente injizieren
Nun wird der TaskService in die TaskListComponent injiziert, damit diese auf die Aufgabenliste zugreifen und mit ihr interagieren kann.
So sieht der Code der Komponente aus:
task-list.ts
Wir importieren den TaskService, das Task-Interface sowie weitere für das Template benötigte Komponenten und Module.
Im Konstruktor der Komponente fügen wir den Service mittels Dependency Injection hinzu:
task-list.ts
Der Service wird als privates Feld gespeichert, um ihn in Methoden der Komponente zu verwenden. Direkt nach der Erstellung der Komponente (im Konstruktor) wird die Aufgabenliste abgerufen. Diese Liste wird anschließend im HTML-Template verwendet.
Die Methoden deleteTask und toggleStatus rufen die Funktionen des Service auf, um eine Aufgabe zu löschen oder ihren Status umzuschalten, und aktualisieren anschließend das lokale Array tasks, sodass die Benutzeroberfläche die Änderungen widerspiegelt.
Dieser Ansatz hält die Komponente einfach: Sie weiß nicht, wie die Daten gespeichert oder verarbeitet werden – sie fordert lediglich den Service auf, sie zu aktualisieren. Dadurch werden Verantwortlichkeiten getrennt: Komponenten kümmern sich um die Ansicht, Services um die Daten.
1. Was ist Dependency Injection (DI) in Angular?
2. Warum aktualisieren wir this.tasks nach dem Aufruf von deleteTask oder toggleStatus?
Danke für Ihr Feedback!
