Angular Academy · Oppitunti

Signaalien ja RxJS:n yhdistäminen

Yhdistäkää signaalit ja observablit yhteensopivuuskerroksen avulla

Oppitunti 4/413 vaihetta

Signaalien ja RxJS:n yhdistäminen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Kaksi reaktiivista maailmaa

Angular-sovelluksissa yhdistyvät signaalit (synkroniset, pull-pohjaiset) ja RxJS Observables (asynkroniset, push-pohjaiset virrat). @angular/core/rxjs-interop-paketti yhdistää ne toSignal- ja toObservable-toiminnoilla.

toSignal-perusteet

toSignal() tilaa Observablen ja tarjoaa sen viimeisimmän arvon vain luku -signaalina. Tilaus peruutetaan automaattisesti, kun injektiokonteksti tuhotaan.

import { toSignal } from '@angular/core/rxjs-interop';

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue ja synkroniset lukutoiminnot

Observablen arvot eivät välttämättä tule synkronisesti, joten signaali tarvitsee alkuarvon. Antakaa initialValue tai käyttäkää asetusta requireSync: true, kun lähteen tiedetään tuottavan arvon välittömästi, kuten BehaviorSubjectin tapauksessa.

value = toSignal(this.behaviorSubject$, { requireSync: true });

async-putken korvaaminen

toSignal korvaa usein async-putken. data$ | async -ilmauksen sijaan luette arvon suoraan muodossa data(), mikä toimii sujuvasti yhdessä computed()-funktion kanssa.

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

toObservable-perusteet

toObservable() muuntaa signaalin Observableksi, joka tuottaa arvon aina signaalin muuttuessa. Tämä on hyödyllistä, kun tarvitsette RxJS-operaattoreita, kuten debounceTime tai switchMap.

import { toObservable } from '@angular/core/rxjs-interop';

query = signal('');
query$ = toObservable(this.query);

Viivästetty hakuprosessi

Yhdistäkää molemmat suunnat: signaali syötetään toObservable-funktioon, RxJS viivästää arvoa ja vaihtaa HTTP-kutsuun, ja toSignal muuntaa tulokset takaisin signaaliksi.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Injektiokonteksti

Molemmat apufunktiot tarvitsevat injektiokontekstin, koska ne hallitsevat elinkaareen sidottuja tilauksia. Kutsukaa niitä kenttien alustajissa tai välittäkää eksplisiittinen injector, jos kutsutte niitä myöhemmin.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Virheenkäsittely

Jos lähteen Observable tuottaa virheen, toSignal heittää virheen uudelleen luettaessa. Käsitelkää virheet putken sisällä catchError-operaattorilla, jotta signaalissa säilyy käyttökelpoinen arvo.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

toObservable-toiminnon ajoitus

toObservable käyttää taustalla effect-toimintoa, joten arvot toimitetaan seuraavassa mikrotehtävässä, ei synkronisesti. Nopeat signaalimuutokset yhdistetään viimeisimpään arvoon.

Kumpaa kannattaa käyttää

Käyttäkää toObservable-funktiota, kun tarvitsette aikaan perustuvia tai korkeamman asteen operaattoreita. Käyttäkää toSignal-funktiota, kun haluatte käyttää mitä tahansa virtaa malleissa ja laskennallisissa näkymämalleissa ilman tilauksen manuaalista hallintaa.

Siivous tapahtuu automaattisesti

Molemmat apufunktiot sitovat tilauksensa injektiokontekstin elinkaareen. Kun komponentti tai palvelu tuhotaan, tilaus puretaan, joten muistivuotoja ei synny eikä manuaalista unsubscribe()-kutsua tarvita.

Pikatarkistus

Tarkistakaa interop-osaamisenne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Yhdistitte signaalit ja RxJS:n: toSignal käyttää virtoja vain luku -signaaleina (initialValue/requireSync), ja toObservable tarjoaa signaalit virtoina RxJS-operaattoreita varten. Tilaukset siivotaan automaattisesti injektiokontekstin avulla.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Signaalien ja RxJS:n yhdistäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Signaalien ja RxJS:n yhdistäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Signaalien ja RxJS:n yhdistäminen”?

Yhdistäkää signaalit ja observablit yhteensopivuuskerroksen avulla Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Signaalien ja RxJS:n yhdistäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy