Datenübergabe in Angular routed components: Die 5 besten Methoden

Wie man Daten in Angular routed components übergibt: Vollständige Anleitung auf TypeScript

Jeder Entwickler, der mit Angular beginnt, stößt früher oder später auf die Frage: „Wie übergibt man Daten von einer Komponente an eine andere über den Router?“. Auf Stack Overflow hat diese Frage tausende Aufrufe – und das nicht ohne Grund. Im Gegensatz zu normalen Parent-Child-Komponenten, bei denen @Input() und @Output() ausreichen, bringt das Routing in Angular eigene Herausforderungen mit sich.

In diesem Artikel betrachten wir 5 bewährte Methoden zur Datenübergabe in Angular routed components. Sie erfahren, wann welche Methode anzuwenden ist, und erhalten fertige Beispiele in TypeScript. Los geht‘s!

Warum kann man Daten nicht einfach über @Input übergeben?

Viele Anfänger versuchen Folgendes:

// ❌ So funktioniert es nicht\n<router-outlet [someData]="data"></router-outlet>

Der Angular Router erstellt Komponenten dynamisch. router-outlet ist eine Direktive, kein Template-Element. Daher ist eine direkte Datenübergabe über Attribute nicht möglich. Es gibt jedoch Umgehungen – und diese sind sogar bequemer!

Methode 1: Verwendung des Router State (am einfachsten)

Die intuitivste Methode ist die Übergabe von Daten über das state-Objekt bei der Navigation. Diese Methode ist seit Angular 7+ verfügbar und funktioniert „out of the box“.

Wie es funktioniert

Sie übergeben ein Objekt mit Daten beim Aufruf von router.navigate() oder über routerLink.

// Component A – Absender\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-list',\n  template: `\n    <button (click)="goToDetails()">Benutzer öffnen</button>\n  `\n})\nexport class UserListComponent {\n  constructor(private router: Router) {}\n\n  goToDetails() {\n    this.router.navigate(['/user', 42], {\n      state: { name: 'Ivan Petrov', role: 'admin' }\n    });\n  }\n}

// Component B – Empfänger\nimport { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-details',\n  template: `\n    <div *ngIf="userData">\n      <h2>{{ userData.name }}</h2>\n      <p>Rolle: {{ userData.role }}</p>\n    </div>\n  `\n})\nexport class UserDetailsComponent implements OnInit {\n  userData: any;\n\n  constructor(private router: Router) {\n    // Daten aus der Navigationshistorie abrufen\n    this.userData = this.router.getCurrentNavigation()?.extras?.state;\n  }\n\n  ngOnInit() {\n    // Alternative Methode – über history.state\n    if (!this.userData) {\n      this.userData = history.state;\n    }\n  }\n}

Vor- und Nachteile

\n
• ✅ Einfachheit der Implementierung
\n
• ✅ Daten sind nicht in der URL sichtbar
\n
• ✅ Funktioniert mit beliebigen Datentypen (Objekte, Arrays)
\n
• ❌ Daten gehen beim Aktualisieren der Seite verloren
\n
• ❌ Funktioniert nicht bei direktem Aufruf der URL
\n

Wann verwenden: Zur Übergabe temporärer Daten, die bei einem Neuladen nicht kritisch sind (z. B. Flash-Nachrichten, Filter).

Methode 2: Route Resolver (zum Vorladen von Daten)

Wenn Sie Daten laden müssen, bevor die Komponente angezeigt wird, verwenden Sie Angular Resolver. Dies ist ein Service, der Daten vor der Aktivierung der Route auflöst.

Resolver erstellen

// user.resolver.ts\nimport { Injectable } from '@angular/core';\nimport { Resolve, ActivatedRouteSnapshot } from '@angular/router';\nimport { Observable, of } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class UserResolver implements Resolve<any> {\n  resolve(route: ActivatedRouteSnapshot): Observable<any> {\n    const userId = route.paramMap.get('id');\n    // Im