Sie lernen, wie Sie die Navigation in Ihrer Angular-Anwendung korrekt einrichten und wie Sie Daten zwischen Komponenten über die URL übergeben.

Wir haben bereits zwei Routen konfiguriert:

• / — zeigt die Liste aller Aufgaben an;

• /task/:id — zeigt Details einer bestimmten Aufgabe anhand ihrer ID an.

Unser Ziel ist es nun, dass beim Klicken auf eine Schaltfläche innerhalb einer Aufgabenkarte die App zur Detailseite navigiert. Die TaskDetailsComponent ruft dann die Aufgaben-ID aus der URL ab und verwendet sie, um die vollständigen Daten der Aufgabe abzurufen.

Wie Komponenten interagieren

Definieren wir, wie diese Routing-Interaktion funktioniert.

Wir fügen eine Schaltfläche in TaskComponent hinzu. Beim Klicken sendet die Komponente ein Ereignis an die übergeordnete Komponente (TaskListComponent). Die übergeordnete Komponente übernimmt die eigentliche Navigation, indem sie die URL aktualisiert, was Angular dazu veranlasst, TaskDetailsComponent für die ausgewählte Aufgabe zu laden.

Warum nicht direkt aus TaskComponent routen?

Falls wir TaskComponent an anderer Stelle wiederverwenden möchten (z. B. in einem Modal oder einer anderen Liste), soll sie nicht an Routing-Logik gebunden sein. Stattdessen sollte sie lediglich dem Elternteil mitteilen, dass eine Navigationsaktion angefordert wird.

Dieser Ansatz ist leichter zu testen und zu lesen, hält die Routing-Logik zentral und stellt sicher, dass die TaskComponent übersichtlich bleibt und sich auf ihre Aufgaben konzentriert.

Implementierung von TaskComponent

Die Hauptaufgabe von TaskComponent besteht darin, Ereignisse an das Elternteil zu senden. Wir fügen dem Template eine Schaltfläche hinzu, die navigateToTask() aufruft und damit das Ereignis auslöst.

Wenn der Benutzer auf die Info-Schaltfläche klickt, löst die Methode navigateToTask() die Übergabe der Aufgaben-ID aus. Dieses Ereignis wird vom übergeordneten Element (TaskListComponent) erfasst, das anschließend die Navigation mithilfe des Angular-Routers übernimmt.

Implementierung von TaskListComponent

Diese Komponente ist für die Navigation zur Detailseite einer Aufgabe zuständig.

Hierfür wird der integrierte Router-Service von Angular verwendet, der es ermöglicht, die URL programmatisch zu ändern und die entsprechende Komponente basierend auf der Route zu laden.

Wir haben den Router-Service im Konstruktor hinzugefügt. Angular stellt diesen Service beim Erstellen der Komponente automatisch bereit, sodass keine zusätzliche Konfiguration erforderlich ist.

Außerdem haben wir einen Ereignis-Listener für (onNavigate) eingerichtet, der die Methode navigateToTask() auslöst.

Wenn die Methode aufgerufen wird (z. B. wenn der Benutzer auf die Info-Schaltfläche klickt), wird die Route /task/3 erstellt, und der Router aktualisiert die URL und lädt die TaskDetailsComponent.

Abrufen einer Aufgabe anhand der ID in TaskDetailsComponent

Wenn der Benutzer zur Route /task/:id navigiert, lädt Angular die TaskDetailsComponent. Diese Komponente ist verantwortlich für:

• Das Auslesen der ID aus der URL;

• Das Finden der entsprechenden Aufgabe anhand ihrer ID;

• Die Anzeige der Aufgabendetails auf dem Bildschirm.

So funktioniert es:

Erläuterung:

Der Service ActivatedRoute ermöglicht den Zugriff auf die Parameter der aktuellen Route.

• Mit snapshot.paramMap.get('id') wird der Wert von id aus der URL extrahiert;

• Anschließend wird dieser in eine Zahl umgewandelt und an getTaskById(id) aus dem TaskService übergeben, um die Aufgabe abzurufen;

• Die Methode goToHomePage() navigiert zurück zur Hauptseite, auf der die vollständige Aufgabenliste angezeigt wird.

Durch die Verwendung des Angular Routers haben wir somit erfolgreich die Navigation zwischen Komponenten eingerichtet und Daten mithilfe eines URL-Parameters übergeben. Die TaskListComponent steuert die Navigation anhand der Aufgaben-ID, und die TaskDetailsComponent liest die ID aus der Route und lädt die entsprechende Aufgabe.