Einrichten des Routings in Angular
Um alles funktionsfähig zu machen, muss Angular mitgeteilt werden, welche URL welche Komponente anzeigt. Dies wird als Routing bezeichnet.
Die Haupt-Routing-Datei
Beim Erstellen einer Angular-Anwendung mit der CLI kann Routing direkt zu Beginn aktiviert werden — einfach bei der entsprechenden Frage „Ja“ auswählen. Angular erstellt dann die notwendigen Dateien (dies wurde bereits beim Erstellen der App erledigt). Eine dieser Dateien ist app.routes.ts.
Falls diese Datei nicht vorhanden ist, kann sie im Stammverzeichnis des Projekts selbst erstellt werden. 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) erkennt 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 Liste der Aufgaben 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, sie aber 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
Can you explain how to connect the routes to the components?
What should I do if my app.routes.ts file is missing?
How do I use the dynamic :id parameter in TaskDetailsComponent?
Awesome!
Completion rate improved to 3.13Einrichten des Routings in Angular
Swipe um das Menü anzuzeigen
Um alles funktionsfähig zu machen, muss Angular mitgeteilt werden, welche URL welche Komponente anzeigt. Dies wird als Routing bezeichnet.
Die Haupt-Routing-Datei
Beim Erstellen einer Angular-Anwendung mit der CLI kann Routing direkt zu Beginn aktiviert werden — einfach bei der entsprechenden Frage „Ja“ auswählen. Angular erstellt dann die notwendigen Dateien (dies wurde bereits beim Erstellen der App erledigt). Eine dieser Dateien ist app.routes.ts.
Falls diese Datei nicht vorhanden ist, kann sie im Stammverzeichnis des Projekts selbst erstellt werden. 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) erkennt 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 Liste der Aufgaben 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, sie aber noch nicht vollständig mit unseren Komponenten verbunden haben. Dies werden wir im nächsten Kapitel erledigen!
Danke für Ihr Feedback!
