javascript / expert
Snippet
Eigene RxJS-Operatoren zur Signal-State-Synchronisation
Dieses Experten-Muster erstellt einen wiederverwendbaren RxJS-Operator, um die Lücke zwischen reaktiven Streams und Angular Signals zu schließen. Er stellt sicher, dass jede Emission eines Observables automatisch ein bestimmtes Signal aktualisiert, wodurch die strukturelle Reinheit gewahrt bleibt, während man von der Signal-basierten Change Detection profitiert.
snippet.js
1
2
3
4
5
6
7
8
9
import { MonoTypeOperatorFunction, tap } from 'rxjs';import { WritableSignal } from '@angular/core';export function syncWithSignal<T>(signal: WritableSignal<T>): MonoTypeOperatorFunction<T> {return tap((value: T) => signal.set(value));}// Usage in Component:// data$.pipe(syncWithSignal(this.mySignal)).subscribe();
angular
Erklärung
1
MonoTypeOperatorFunction<T>
Ein TypeScript-Typ, der einen RxJS-Operator definiert, der denselben Datentyp empfängt und zurückgibt.
2
tap((value: T) => ...)
Der tap-Operator führt Seiteneffekte für jede Emission aus, ohne die Daten des Streams zu verändern.
3
signal.set(value)
Aktualisiert das Angular Signal direkt mit dem neuesten Wert aus dem Observable-Stream.