Routing in Angular: Einrichten, Navigieren und Routenparameter verwenden

Eine der leistungsfähigsten Funktionen in Angular ist das Routing. Es ermöglicht das Erstellen von Single-Page-Applications (SPA), bei denen die Navigation zwischen verschiedenen Ansichten ohne vollständiges Neuladen der Seite erfolgt. In diesem Artikel werden wir Schritt für Schritt erklären, wie man das Routing in Angular einrichtet, Routen erstellt, zwischen Komponenten navigiert und Routenparameter verwendet.

Was ist Routing in Angular?

Das Angular-Routing-Modul bietet eine Möglichkeit, verschiedene Komponenten basierend auf der URL des Browsers zu laden. Durch die Verwendung des Angular-Routers können Anwendungen so konfiguriert werden, dass verschiedene URLs zu unterschiedlichen Ansichten und Komponenten führen. Dies macht es einfach, eine dynamische und interaktive Benutzererfahrung zu schaffen, bei der die Anwendung flüssig zwischen verschiedenen Bereichen wechseln kann, ohne die Seite neu zu laden.

Einrichten des Angular-Routings

Um Routing in einer Angular-Anwendung zu verwenden, musst du sicherstellen, dass das `RouterModule` in deinem Modul importiert und konfiguriert wird. Wenn du ein neues Angular-Projekt mit dem Angular CLI erstellst, wirst du gefragt, ob du Angular-Routing hinzufügen möchtest. Wenn du dies bestätigst, wird das Routing automatisch eingerichtet. Andernfalls kannst du es manuell hinzufügen.

Schritt 1: Das `RouterModule` importieren

Füge zunächst das `RouterModule` in das Hauptmodul deiner Anwendung ein (normalerweise `app.module.ts`):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)  // Konfiguration der Routen
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

– `RouterModule.forRoot(routes)`: Dies initialisiert das Routing und registriert die in `routes` definierten Routen in der Anwendung.

– `routes`: Dies ist ein Array von Routen, das definiert, welche Komponenten für welche Pfade geladen werden sollen.

In diesem Beispiel haben wir zwei Routen definiert:

– `/`: Lädt die `HomeComponent`.

– `/about`: Lädt die `AboutComponent`.

Schritt 2: Links zwischen Seiten erstellen

Um zwischen den verschiedenen Routen zu navigieren, verwenden wir die Direktive `routerLink`, die eine Navigation ohne Neuladen der Seite ermöglicht.

In der Hauptkomponente (`app.component.html`), könnte dies so aussehen:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<!-- Hier wird der Inhalt der jeweils aktiven Route angezeigt -->
<router-outlet></router-outlet>

– `routerLink`: Diese Direktive definiert Links, die den Router verwenden, um zwischen den Routen zu navigieren.

– `router-outlet`: Dies ist ein Platzhalter, an dem die aktuell aktive Komponente basierend auf der Route geladen wird.

Wenn ein Benutzer auf einen der Links klickt, ändert sich die URL im Browser, und die entsprechende Komponente wird im `router-outlet` gerendert.

Navigieren zwischen Routen

Neben dem Verwenden von `routerLink` in Templates kannst du auch programmgesteuert zwischen den Routen navigieren. Angular bietet hierfür den `Router`-Service, der es ermöglicht, Navigationen im Code auszuführen.

Beispiel:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `<button (click)="goToAbout()">Über uns</button>`
})

export class HomeComponent {
  constructor(private router: Router) {}
  goToAbout() {
    this.router.navigate(['/about']);
  }
}

Hier wird durch das Klicken des Buttons eine Navigation zur Route `/about` ausgelöst.

Verwenden von Routenparametern

Routenparameter ermöglichen es, dynamische Inhalte basierend auf der URL zu laden. Dies ist besonders nützlich, wenn du beispielsweise Details zu einem bestimmten Objekt anzeigen möchtest, wie einen Benutzer oder einen Artikel.

Schritt 1: Definieren von Routen mit Parametern

Um eine Route mit Parametern zu definieren, verwendest du die Syntax `:param` im Pfad.

Beispiel:

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

In diesem Fall definiert die Route `user/:id` einen Parameter `id`, der in der Komponente abgerufen werden kann.

Schritt 2: Abrufen der Parameter

In der `UserComponent` kannst du den Routenparameter mithilfe des `ActivatedRoute`-Services abrufen:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>Benutzer ID: {{ userId }}</h1>`
})

export class UserComponent implements OnInit {
  userId: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

– `route.snapshot.paramMap.get(‚id‘)`: Dies liest den Wert des `id`-Parameters aus der aktuellen Route.

Wenn der Benutzer beispielsweise zur URL `/user/123` navigiert, wird `123` als `userId` in der `UserComponent` gesetzt.

Dynamisches Laden von Inhalten basierend auf Parametern

Durch die Verwendung von Routenparametern kannst du auch dynamische Inhalte laden. Nehmen wir an, du möchtest Benutzerinformationen basierend auf der ID laden:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <h1>Benutzer: {{ user?.name }}</h1>
    <p>E-Mail: {{ user?.email }}</p>
})

export class UserComponent implements OnInit {
  user: any;
  constructor(private route: ActivatedRoute, private userService: UserService) {}
  ngOnInit() {
    const userId = this.route.snapshot.paramMap.get('id');
    this.userService.getUserById(userId).subscribe(user => {
      this.user = user;
    });
  }
}

In diesem Beispiel wird ein Benutzer-Objekt basierend auf der ID von einer API abgerufen und in der Komponente angezeigt.

Fazit

Routing ist ein essenzielles Feature von Angular, das es Entwicklern ermöglicht, Single-Page-Applications effizient zu erstellen. Mit der Möglichkeit, Komponenten dynamisch basierend auf der URL zu laden, ermöglicht Angular eine benutzerfreundliche und reaktionsfähige Navigation. Durch die Verwendung von Routenparametern und die Integration des `Router`-Services lassen sich komplexe Navigations- und Inhaltsstrukturen in einer Anwendung umsetzen.

Mit dieser Anleitung solltest du nun in der Lage sein, das Routing in deiner Angular-Anwendung einzurichten, Routen zu erstellen und Routenparameter effektiv zu nutzen, um eine dynamische Benutzererfahrung zu schaffen.