Angular Academy · Lektion

Signals und RxJS verbinden

Signals und Observables mit Interoperabilität verbinden

Signals und RxJS verbinden ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei reaktive Welten

Angular-Anwendungen kombinieren Signals (synchron und Pull-basiert) mit RxJS Observables (asynchronen, Push-basierten Datenströmen). Das Paket @angular/core/rxjs-interop verbindet beide Welten mit toSignal und toObservable.

Grundlagen von toSignal

toSignal() abonniert ein Observable und stellt dessen neuesten Wert als schreibgeschütztes Signal bereit. Das Abonnement wird automatisch beendet, wenn der Injection Context zerstört wird.

import { toSignal } from '@angular/core/rxjs-interop';

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue und synchrone Lesezugriffe

Observables geben möglicherweise nicht synchron Werte aus, daher benötigt ein Signal einen Startwert. Geben Sie initialValue an oder verwenden Sie requireSync: true, wenn garantiert ist, dass die Quelle sofort einen Wert ausgibt (wie ein BehaviorSubject).

value = toSignal(this.behaviorSubject$, { requireSync: true });

Die async-Pipe ersetzen

toSignal ersetzt häufig die async-Pipe. Statt data$ | async lesen Sie direkt data(), was sich problemlos mit computed() kombinieren lässt.

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

Grundlagen von toObservable

toObservable() wandelt ein Signal in ein Observable um, das bei jeder Änderung des Signals einen Wert ausgibt. Das ist nützlich, wenn Sie RxJS-Operatoren wie debounceTime oder switchMap benötigen.

import { toObservable } from '@angular/core/rxjs-interop';

query = signal('');
query$ = toObservable(this.query);

Pipeline für eine verzögerte Suche

Kombinieren Sie beide Richtungen: Ein Signal wird an toObservable übergeben, RxJS verzögert die Eingaben und wechselt zu einem HTTP-Aufruf, und toSignal wandelt die Ergebnisse wieder in ein Signal um.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Injection Context

Beide Hilfsfunktionen benötigen einen Injection Context, da sie an einen Lifecycle gebundene Abonnements verwalten. Rufen Sie sie als Feldinitialisierer auf oder übergeben Sie einen expliziten injector, wenn Sie sie später aufrufen.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Fehlerbehandlung

Wenn das Quell-Observable einen Fehler ausgibt, löst toSignal beim Lesen erneut einen Fehler aus. Behandeln Sie Fehler innerhalb der Pipeline mit catchError, damit das Signal einen nutzbaren Wert behält.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

Timing von toObservable

toObservable verwendet intern einen Effect, daher werden Ausgaben im nächsten Microtask und nicht synchron zugestellt. Schnelle Änderungen am Signal werden zusammengefasst, sodass nur der neueste Wert ausgegeben wird.

Wann Sie welche Funktion verwenden

Verwenden Sie toObservable, wenn Sie zeitbasierte oder Higher-Order-Operatoren benötigen. Verwenden Sie toSignal, um beliebige Datenströme in Templates und berechneten Read Models ohne manuelles Abonnement zu nutzen.

Bereinigung erfolgt automatisch

Beide Hilfsfunktionen binden ihr Abonnement an den Lifecycle des Injection Contexts. Wenn die Komponente oder der Service zerstört wird, wird das Abonnement beendet. So werden Leaks ohne manuelles unsubscribe() verhindert.

Kurze Überprüfung

Überprüfen Sie Ihr Wissen zur Interoperabilität.

Zusammenfassung

Sie haben Signals und RxJS miteinander verbunden: toSignal verwendet Datenströme als schreibgeschützte Signals (mit initialValue/requireSync), während toObservable Signals für RxJS-Operatoren als Datenströme bereitstellt. Abonnements werden über den Injection Context automatisch bereinigt.

Häufig gestellte Fragen

Ist die Lektion „Signals und RxJS verbinden“ kostenlos?

Ja — der vollständige Text von „Signals und RxJS verbinden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Signals und RxJS verbinden“?

Signals und Observables mit Interoperabilität verbinden Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Signals und RxJS verbinden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy