Einrichten des Routings in Angular
Damit alles funktioniert, muss Angular mitgeteilt werden, welche URL welche Komponente anzeigt. Dies wird als Routing bezeichnet. Los geht's!
Die Haupt-Routing-Datei
Wenn Sie eine Angular-Anwendung mit der CLI erstellen, können Sie das Routing direkt zu Beginn aktivieren — beantworten Sie einfach die Frage nach Routing mit „Ja“. Angular erstellt dann die notwendigen Dateien für Sie (was wir bereits beim Erstellen der App gemacht haben). Eine dieser Dateien ist app.routes.ts.
Falls Sie diese Datei aus irgendeinem Grund nicht haben, ist das kein Problem — Sie können sie selbst im Stammverzeichnis Ihres Projekts anlegen. Sie sollte wie folgt aussehen:
routes.ts
Diese Datei informiert Angular darüber, welche Routen in Ihrer Anwendung existieren und welche Komponenten für jede Route angezeigt werden sollen.
Stellen Sie außerdem sicher, dass Ihre Routen in app.config.ts wie folgt eingebunden sind:
config.ts
Ohne die Zeile provideRouter(routes) kennt Angular Ihre Routen nicht, selbst wenn sie in app.routes.ts definiert sind.
Routen konfigurieren
Fügen wir nun Routen für unsere Task Tracker-App hinzu. Öffne app.routes.ts und schreibe den folgenden Code:
routes.ts
Dies ist lediglich ein Array von Routen, das exportiert wird. Jede Route ist ein Objekt mit folgenden Einstellungen:
-
path— der URL-Pfad; -
component— die Komponente, die beim Navigieren zu diesem Pfad angezeigt wird.
In unserem Fall haben wir zwei Routen:
Die Hauptseite, die die Aufgabenliste anzeigt.
routes.ts
Wenn ein Benutzer die Root-URL (localhost:4200/) aufruft, zeigt Angular die TaskListComponent an.
Aufgabendetailseite mit Informationen zu einer einzelnen Aufgabe:
routes.ts
Hier ist :id ein dynamischer Parameter. Angular erkennt, dass :id jeden beliebigen Wert annehmen kann (wie /task/1, /task/42 usw.). Dieser Wert wird automatisch an TaskDetailsComponent übergeben und kann verwendet werden, um Daten für die jeweilige Aufgabe abzurufen.
Wenn ein Benutzer also zu localhost:4200/task/1 navigiert, zeigt Angular die TaskDetailsComponent mit den Details für task №1 an.
Derzeit funktioniert noch nichts, da wir nur die Routen definiert, aber sie noch nicht vollständig mit unseren Komponenten verbunden haben. Dies werden wir im nächsten Kapitel erledigen!
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
Awesome!
Completion rate improved to 3.13Einrichten des Routings in Angular
Swipe um das Menü anzuzeigen
Damit alles funktioniert, muss Angular mitgeteilt werden, welche URL welche Komponente anzeigt. Dies wird als Routing bezeichnet. Los geht's!
Die Haupt-Routing-Datei
Wenn Sie eine Angular-Anwendung mit der CLI erstellen, können Sie das Routing direkt zu Beginn aktivieren — beantworten Sie einfach die Frage nach Routing mit „Ja“. Angular erstellt dann die notwendigen Dateien für Sie (was wir bereits beim Erstellen der App gemacht haben). Eine dieser Dateien ist app.routes.ts.
Falls Sie diese Datei aus irgendeinem Grund nicht haben, ist das kein Problem — Sie können sie selbst im Stammverzeichnis Ihres Projekts anlegen. Sie sollte wie folgt aussehen:
routes.ts
Diese Datei informiert Angular darüber, welche Routen in Ihrer Anwendung existieren und welche Komponenten für jede Route angezeigt werden sollen.
Stellen Sie außerdem sicher, dass Ihre Routen in app.config.ts wie folgt eingebunden sind:
config.ts
Ohne die Zeile provideRouter(routes) kennt Angular Ihre Routen nicht, selbst wenn sie in app.routes.ts definiert sind.
Routen konfigurieren
Fügen wir nun Routen für unsere Task Tracker-App hinzu. Öffne app.routes.ts und schreibe den folgenden Code:
routes.ts
Dies ist lediglich ein Array von Routen, das exportiert wird. Jede Route ist ein Objekt mit folgenden Einstellungen:
-
path— der URL-Pfad; -
component— die Komponente, die beim Navigieren zu diesem Pfad angezeigt wird.
In unserem Fall haben wir zwei Routen:
Die Hauptseite, die die Aufgabenliste anzeigt.
routes.ts
Wenn ein Benutzer die Root-URL (localhost:4200/) aufruft, zeigt Angular die TaskListComponent an.
Aufgabendetailseite mit Informationen zu einer einzelnen Aufgabe:
routes.ts
Hier ist :id ein dynamischer Parameter. Angular erkennt, dass :id jeden beliebigen Wert annehmen kann (wie /task/1, /task/42 usw.). Dieser Wert wird automatisch an TaskDetailsComponent übergeben und kann verwendet werden, um Daten für die jeweilige Aufgabe abzurufen.
Wenn ein Benutzer also zu localhost:4200/task/1 navigiert, zeigt Angular die TaskDetailsComponent mit den Details für task №1 an.
Derzeit funktioniert noch nichts, da wir nur die Routen definiert, aber sie noch nicht vollständig mit unseren Komponenten verbunden haben. Dies werden wir im nächsten Kapitel erledigen!
Danke für Ihr Feedback!
