Routen in Angular konfigurieren

Diese Lektion führt in das Angular-Routing ein – eine Möglichkeit, zwischen Ansichten zu navigieren und URLs in Ihrer App zu verwalten.

Was ist Routing?

Routing ermöglicht die Navigation zwischen verschiedenen Komponenten oder Seiten Ihrer Angular-Anwendung auf Grundlage der URL.

Routing-Modul einrichten

Erstellen Sie ein Routing-Modul beim Start Ihres Projekts oder später mithilfe von Angular CLI:

ng generate module app-routing --flat --module=app

Routen definieren

Routen werden als Array von Pfaden definiert, die mit Komponenten verknüpft sind:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Router Outlet

Verwenden Sie <router-outlet></router-outlet>, um die passenden Komponenten abhängig von der Route dynamisch zu rendern.

<router-outlet></router-outlet>

Mit routerLink navigieren

Navigieren Sie mithilfe der Direktive routerLink zwischen Ansichten:

<a routerLink="/home">Home</a>

Programmatisch navigieren

Sie können auch programmgesteuert mithilfe des Router-Service navigieren:

this.router.navigate(['/home']);

Wildcard-Routen

Behandeln Sie nicht definierte Pfade mit Wildcard-Routen, um eine benutzerdefinierte 404-Seite anzuzeigen:

{ path: '**', component: PageNotFoundComponent }

Zusammenfassung

Sie verstehen nun die Grundlagen des Routings und können Routen in Angular-Apps effektiv konfigurieren. Gute Arbeit!