Angular: Gebundene Eingaben für Routen

Mit der Einführung von Angular 16 erleben wir eine deutliche Verbesserung, wenn es darum geht, Informationen aus Angular-Routen in Komponenten einzufügen. Es ist nun möglich, Daten direkt an @Input Dekoratoren von Komponenten zu binden, was eine elegantere und effizientere Methode der Datenübertragung darstellt.

Betrachten wir zunächst die konventionelle Methode:

1const routes: Route[] = [
2// weitere Routen
3  {
4    path: 'details/:id',
5    loadComponent: () =>
6      import('./blog-details.component').then((c) => c.BlogDetails),
7    data: {
8      admin: true,
9    },
10  },
11];
12
13@Component({
14  selector: 'blog-details',
15  template: `
16  <ng-container *ngIf="vm$ | async as vm"><p> with active route {{ vm.id }} {{ vm.admin | json }} </p></ng-container>
17  `,
18  styles: [],
19  standalone: true,
20  imports: [NgIf, AsyncPipe],
21  changeDetection: ChangeDetectionStrategy.OnPush,
22})
23export class BlogDetails {
24  activatedRoute = inject(ActivatedRoute);
25
26  id$ = this.activatedRoute.params.pipe(map((params) => params['id']));
27
28  idData$ = this.activatedRoute.data;
29
30  vm$ = combineLatest([this.id$, this.idData$]).pipe(
31    map(([id, idData]) => ({ id, admin: idData.admin }))
32  );
33}

Bei dieser älteren Methode war es erforderlich, ActivatedRoute zu injecten und die Parameter sowie das Datenattribut aus der Route mühsam auszulesen.

Schauen wir uns nun die neue und verbesserte Methode an:

Die Datei main.ts muss leicht angepasst werden, um die neue Option withComponentInputBinding im Router zu aktivieren:

1bootstrapApplication(App, {
2  providers: [provideRouter(routes, withComponentInputBinding())],
3});

Dann können die Routeninformationen über @Input Dekoratoren direkt an die Komponenten übergeben werden:

1@Component({
2  selector: 'blog-details',
3  template: `<p>with component input binding: {{ id }} {{ admin | json }} </p>`,
4  styles: [],
5  standalone: true,
6  imports: [NgIf, JsonPipe],
7  changeDetection: ChangeDetectionStrategy.OnPush,
8})
9export class BlogDetails {
10  @Input() id!: string;
11
12  @Input() admin!: boolean;
13}

Diese Methode vereinfacht die Datenbindung und macht den Code sauberer und leichter zu pflegen. Ein praktisches Beispiel hierfür findest du auf Stackblitz.

Weitere Informationen:

• Binding Router Information to Routed Component Inputs in Angular