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 zuständig ist. In dieser Komponente werden die id, der title und der status der Aufgabe angezeigt. Zusätzlich 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 außerdem die Logik für das Hinzufügen, Aktualisieren und Löschen von Aufgaben.

Zusammengefasst übernimmt die TaskComponent das Erscheinungsbild und das Verhalten einer einzelnen Aufgabe, während die TaskListComponent die gesamte Liste der Aufgaben sowie die Interaktion zwischen ihnen verwaltet.

Regeln zum Erstellen einer Komponente

In Angular wird die Angular CLI verwendet, um Komponenten zu erstellen. Dieses praktische Werkzeug generiert automatisch alle notwendigen Dateien und integriert die Komponente an der richtigen Stelle im Projekt.

Es müssen zwei Komponenten erstellt werden: TaskComponent und TaskListComponent. Eine ist für die Darstellung einzelner Aufgaben zuständig, die andere verwaltet die Aufgabenliste.

Projektstruktur

Zur besseren Übersicht wird für jede Komponente ein eigener Ordner im Verzeichnis src/app angelegt. Dies erleichtert die Navigation und Wartung des Codes, insbesondere wenn die Anwendung wächst.

Erstellen der TaskComponent

Zur Generierung einer Komponente wird die Angular CLI verwendet. Öffnen Sie das Terminal in VS Code und stellen Sie sicher, dass Sie sich im Hauptverzeichnis 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 im Verzeichnis task ein neuer Ordner src/app mit vier Dateien erstellt:

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

Erstellen der TaskListComponent

Nun wird die Komponente für die Aufgabenliste erstellt, wie zuvor. Führen Sie den folgenden Befehl aus:

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

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, der die Logik und das Template für eine einzelne Aufgabe verwaltet, und TaskListComponent, der die gesamte Aufgabenliste steuert.