Mene ne Observables kuma ta yaya Angular ke amfani da RxJS?

Question

Accepted Answer

An **Observable** (daga **RxJS** library) yana wakilar **jerin dabi'u akan lokaci** wanda kuke iya sa jeri ga shi. Angular ke amfani da RxJS sosai — HTTP requests, router events, forms, da `EventEmitter` duka suna da tushe na Observable — saboda haka fahimtar su ya zama muhimmi. ## Observable da Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observables na iya aika da dabi'u da yawa, kawai suna aiki lokacin da aka sa jeri, kuma ana iya toshe su (soke) — wanda ya sa su zai fi dacewa don abubuwan kararraki, jerin abubuwa, da HTTP da kuke iya son toshe. ## Subscribing ```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 }); ``` Ba komai ya faru ba sai lokacin da kuke `.subscribe()` — Observable yana da jinsiniya. ## Operators suna canza jerin abubuwa ```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)); ``` Operators (masu alaƙa cikin `.pipe()`) suna canza jerin abubuwa ta hanya ta gaskiya — debounce, filter, map, da sauransu — na warware matsalolin asynchronous (kamar search-as-you-type) sosai. ## Hadarin rashin alaƙa: toshe jeri ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` Jerin abubuwa na hannun jiya dole ne a tsafta su cikin `ngOnDestroy`, ko kuma za su ci gaba da aiki bayan component ya tafi — aikin mara amfani. Hanyoyin gida: **`async` pipe** (auto-unsubscribes), ko `takeUntilDestroyed()`. ```html

``` ## Mene ya sa ya mahalaci RxJS Observables suna da alaƙa ta Angular — ba kuke iya amfani da HttpClient, reactive forms, ko router ba tare da su. Fahimtar subscription, operators, da musamman **unsubscribing** (ko amfani da `async` pipe don guje wa jujjuyan tsarantsi) ya zama muhimmi: yana da tushe na karfin Angular don asynchronous data da kuma yana daga cikin ci gaba da matsaloli (hasashen abubuwa da aka manta jeri).