Welche Komponenten werden benötigt?

Sie wissen bereits, was eine Komponente ist. Nun ist es an der Zeit, eine eigene Komponente zu erstellen, die in der App verwendet werden kann.

Die Anwendung besteht aus zwei Komponenten. Die erste ist die TaskComponent, die für die Anzeige einer einzelnen Aufgabe verantwortlich ist. In dieser Komponente werden die id, der title und der status der Aufgabe angezeigt. Außerdem werden Schaltflächen hinzugefügt, mit denen der Benutzer die Aufgabe abschließen oder löschen kann.

Die zweite Komponente ist die TaskListComponent, die als Wrapper für alle Aufgaben dient. Sie enthält ein Array von Aufgaben und zeigt jede einzelne mit der TaskComponent an. Diese Komponente übernimmt zudem die Logik für das Hinzufügen, Aktualisieren und Löschen von Aufgaben.

Kurz gesagt, die TaskComponent steuert das Aussehen und Verhalten einer einzelnen Aufgabe, während die TaskListComponent die gesamte Liste der Aufgaben und die Interaktion zwischen ihnen verwaltet.

Regeln zum Erstellen einer Komponente

In Angular verwenden Sie die Angular CLI, um Komponenten zu erstellen. Dies ist ein praktisches Werkzeug, das automatisch alle notwendigen Dateien generiert und die Komponente an der richtigen Stelle in Ihr Projekt integriert.

Sie müssen zwei Komponenten erstellen: TaskComponent und TaskListComponent. Eine ist für die Anzeige einzelner Aufgaben zuständig, die andere verwaltet die Aufgabenliste.

Projektstruktur

Um die Übersichtlichkeit zu gewährleisten, erstellen wir für jede Komponente einen eigenen Ordner im Verzeichnis src/app. Dadurch wird der Code leichter zu navigieren und zu warten, insbesondere wenn die Anwendung wächst.

Erstellen der TaskComponent

Um eine Komponente zu generieren, verwenden Sie die Angular CLI. Öffnen Sie das Terminal in VS Code und stellen Sie sicher, dass Sie sich im Stammverzeichnis Ihres Projekts befinden. Führen Sie dann den folgenden Befehl aus:

Oder eine kürzere Version:

Hier ist eine Aufschlüsselung des Befehls:

Nach Ausführung des Befehls wird ein neuer Ordner task innerhalb von src/app erstellt, der vier Dateien enthält:

Dies ist die Standardkonfiguration für jede Komponente. Der einzige Unterschied ist das Präfix in den Dateinamen (task in diesem Fall), das vom Namen stammt, den Sie im Generierungsbefehl angegeben haben.

Erstellen der TaskListComponent

Erstellen Sie nun die Komponente für die Aufgabenliste, wie zuvor. Führen Sie den folgenden Befehl aus:

Dadurch wird ein neuer Ordner task-list mit den folgenden Dateien erstellt:

Diese Dateien erfüllen die gleichen Zwecke wie im TaskComponent, sind jedoch nun für die zweite Komponente bestimmt.

An diesem Punkt verfügen Sie über zwei separate Komponenten mit einer klaren Struktur: TaskComponent, das die Logik und das Template für eine einzelne Aufgabe verwaltet, und TaskListComponent, das die gesamte Aufgabenliste steuert.