Observable (kutoka katika maktaba ya RxJS) inawakilisha mtiririko wa maadili kwa muda ambayo unaweza kujiandikisha. Angular inatumia RxJS sana — ombi za HTTP, matukio ya router, fomu, na EventEmitter zote zinategemea Observable — kwa hivyo kuelewa hizo ni muhimu.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables zinaweza kutoa maadili mengi, zinatekeleza tu wakati unapojiandikilisha, na zinaweza kuondolewa kutoka (kughairi) — zinaziifanya zifae kwa matukio, mtiririko, na HTTP ambayo unaweza kutaka kughairi.
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
});
Hakuna kinachotokea hadi .subscribe() — Observable ina tabia ya kuwa wazimu.
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));
Waendeshaji (waliounganishwa ndani ya .pipe()) hubadilisha mtiririko kwa njia mahsusi — debounce, filter, map, nk. — hutatua matatizo ya kawaida ya asinkroni (kama kutafuta-kwa-wakati-wa-kuandika) kwa elegance.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Jiandikishe bila kusimamia lazima linasafishwa katika ngOnDestroy, au linaendelea kuendesha baada ya sehemu kuishia — uvuja wa kumbumbu. Suluhisho za kawaida: async pipe (inajiandikilisha kiotomatiki) au takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observables za RxJS ziko katika Angular — huwezi kutumia HttpClient, fomu zinazoreakta, au router bila hizo.
Kuelewa jiandikishe, waendeshaji, na haswa kusindika (au kututumia async pipe ili kuepuka usimamizi wa mikono) ni muhimu sana: ni chanzo cha nguvu ya Angular kwa data ya asinkroni na moja ya vichafuzi vyake vya kawaida (vunja kutokana na jiandikishe zilizosahauliwa).