Observable (iš RxJS bibliotekos) reprezentuoja reikšmių srautą per laiką, į kurį galite prenumeruoti. Angular naudoja RxJS plačiai — HTTP prašymai, maršrutizatoriaus įvykiai, formos ir EventEmitter yra pagrįsti Observable — todėl jų supratimas yra būtinas.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable gali sklaidyti kelias reikšmes, vykdyti tik prenumeravus ir gali būti atsisakyti (atšaukti) — dėl to jie idealūs įvykiams, srautams ir HTTP, kuriuos galbūt norėsite atšaukti.
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
});
Nieko nenutinka, kol nepaskambinsite .subscribe() — Observable yra lėtas.
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));
Operatoriai (suderinti .pipe() viduje) deklaratyviai transformuoja srautą — debounce, filter, map ir kt. — elegantiškais sprendžia dažnas asinchronines problemas (pvz., paiešką rakenant).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Rankiniai prenumeratimai turi būti išvalyti ngOnDestroy arba jie toliau veikia po komponento pašalinimo — tai yra atminties nuotėkis. Dažni sprendimai: async pipe (auto-unsubscribe) arba takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observable yra integruoti visoje Angular — negalite naudoti HttpClient, reaktyvių formų ar maršrutizatoriaus be jų.
Supratimas apie prenumeravimą, operatorius ir ypač atsisakymo (arba async pipe naudojimą, kad išvengtumėte rankinio valdymo) yra kritiškas: tai yra Angular galios šaltinis asinchroniniams duomenims ir vienas iš dažniausių jo spąsčių (nuotėkiai iš pamirštu prenumeratų).