Was sind Observables und wie nutzt Angular RxJS?

Question

Accepted Answer

Ein **Observable** (aus der **RxJS**-Bibliothek) stellt einen **Strom von Werten über die Zeit dar**, auf den man sich abonnieren kann. Angular verwendet RxJS überall — HTTP-Anfragen, Router-Ereignisse, Formulare und `EventEmitter` sind alle Observable-basiert — daher ist deren Verständnis wesentlich. ## Observable vs Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observables können mehrere Werte emittieren, werden nur bei Abonnement ausgeführt und können abgemeldet (storniert) werden — ideal für Ereignisse, Streams und HTTP, die man möglicherweise stornieren möchte. ## Abonnieren ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // each emitted value error: (err) => console.error(err), // on error complete: () => console.log("done"), // stream finished }); ``` Es passiert nichts, bis man `.subscribe()` aufruft — das Observable ist lazy. ## Operatoren transformieren Streams ```ts import { map, filter, debounceTime } from "rxjs/operators"; this.searchInput.valueChanges.pipe( debounceTime(300), // wait for typing to pause filter(text => text.length > 2), // ignore short queries map(text => text.trim()), // transform ).subscribe(query => this.search(query)); ``` Operatoren (in `.pipe()` verkettet) transformieren den Stream deklarativ — debounce, filter, map usw. — und lösen häufige Async-Probleme (wie Suche-während-Eingabe) elegant. ## Die Speicherleck-Gefahr: Abmelden ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` Manuelle Abonnements müssen in `ngOnDestroy` bereinigt werden, sonst laufen sie weiter, nachdem die Komponente weg ist — ein Speicherleck. Häufige Lösungen: die **`async`-Pipe** (automatisches Abmelden), oder `takeUntilDestroyed()`. ```html

``` ## Warum es wichtig ist RxJS Observables sind überall in Angular verflochten — man kann HttpClient, reaktive Formulare oder den Router nicht ohne sie verwenden. Das Verständnis von Abonnement, Operatoren und besonders **Abmelden** (oder die `async`-Pipe nutzen, um manuelle Verwaltung zu vermeiden) ist entscheidend: Es ist sowohl die Quelle von Angulars Kraft für asynchrone Daten als auch eine der häufigsten Fallstricke (Lecks aus vergessenen Abonnements).