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

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 liest dann die Aufgaben-ID aus der URL aus und verwendet sie, um die vollständigen Daten der Aufgabe abzurufen.

Wie Komponenten interagieren

Definieren wir, wie diese Routing-Interaktion funktionieren wird.

Wir fügen eine Schaltfläche innerhalb von TaskComponent hinzu. Wenn diese angeklickt wird, 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 später 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 das übergeordnete Element darüber informieren, dass eine Navigationsaktion angefordert wurde.

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

Implementierung von TaskComponent

Die Hauptaufgabe von TaskComponent besteht darin, Ereignisse an die übergeordnete Komponente 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 durchführt.

Implementierung von TaskListComponent

Diese Komponente ist für die Navigation zur Detailseite einer Aufgabe verantwortlich.

Dazu verwenden wir den integrierten Router-Service von Angular, 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 der ID;

• Die Anzeige der Aufgabendetails auf dem Bildschirm.

So funktioniert es:

Erläuterung:

Der Dienst 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 wurde 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.