Observable (RxJS-kirjastosta) edustaa arvojen virtaa ajan kuluessa, johon voit tilata. Angular käyttää RxJS:ää laajasti — HTTP-pyynnöt, reitittimen tapahtumat, lomakkeet ja EventEmitter ovat kaikki Observable-pohjaisia — joten niiden ymmärtäminen on olennaista.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables voivat lähettää useita arvoja, suoritetaan vain kun tilataan ja voidaan peruuttaa (peruuttaa) — mikä tekee niistä ihanteellisia tapahtumille, virroille ja HTTP-pyynnöille, jotka haluat mahdollisesti peruuttaa.
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // each emitted value
error: (err) => console.error(err), // on error
complete: () => console.log("done"), // stream finished
});
Mitään ei tapahdu, ennen kuin kutsut .subscribe() — Observable on laiska.
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));
Operaattorit (ketjutettu .pipe() sisällä) muuntavat virtaa deklaratiivisesti — debounce, filter, map jne. — ratkaisemalla yhteiset async-ongelmat (kuten haku-kirjoitettaessa) tyylikkäästi.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manuaaliset tilaukset on puhdistettava ngOnDestroy-metodissa, muuten ne jatkavat toimintaansa komponentin poistuttua — muistin vuoto. Yleiset ratkaisut: async pipe (automaattinen tilauksen peruuttaminen), tai takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables ovat kudottu kaikkialle Angularissa — et voi käyttää HttpClientia, reaktiivisia lomakkeita tai reititintä ilman niitä.
Tilaamisen, operaattoreiden ja erityisesti tilauksen peruuttamisen ymmärtäminen (tai async pipe:n käyttö manuaalisen hallinnan välttämiseksi) on kriittistä: se on sekä Angularin voiman lähde asynkronisille tiedoille että yksi sen yleisimmistä sudenkuopista (vuodot unohdetuista tilauksista).