javascript / expert
Snippet
Deklarative Routendaten-Auflösung via Signal-Brücke
Die Überbrückung von RxJS-Observables der ActivatedRoute zu Signals ermöglicht eine modernere, signalbasierte Komponentenarchitektur. Die Verwendung von `toSignal` stellt sicher, dass Änderungen der Routendaten reaktiv verarbeitet werden und innerhalb von `computed`-Werten für abgeleitete Zustände ohne manuelles Subskriptionsmanagement verwendet werden können.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ActivatedRoute } from '@angular/router';import { toSignal } from '@angular/core/rxjs-interop';import { Component, inject, computed } from '@angular/core';@Component({template: `<h1>{{ title() }}</h1>`})export class DetailComponent {private route = inject(ActivatedRoute);private data = toSignal(this.route.data);title = computed(() => this.data()?.['pageTitle'] ?? 'Default');}
angular
Erklärung
1
private data = toSignal(this.route.data);
Konvertiert einen asynchronen Observable-Stream in einen reaktiven Signalwert.
2
title = computed(() => this.data()?.['pageTitle'] ?? 'Default');
Erstellt ein abgeleitetes Signal, das sich automatisch neu berechnet, wenn sich die Routendaten ändern.