Angular Academy · Oppitunti

linkedSignal ja edistyneet mallit

Koordinoikaa riippuvaisia signaaleja reaktiivisesti.

Oppitunti 4/413 vaihetta

linkedSignal ja edistyneet mallit 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.

linkedSignalin ratkaisema ongelma

Joskus tarvitset kirjoitettavaa tilaa, joka myös nollautuu, kun jokin lähde muuttuu. Tavallinen computed on vain luku -tyyppinen, eikä tavallinen signaali nollaudu automaattisesti. linkedSignal() yhdistää nämä ominaisuudet: lähteestä johdettu kirjoitettava tila.

Perustason linkedSignal

Välitä laskenta. Tuloksena on kirjoitettava signaali, joka lasketaan uudelleen lähteen muuttuessa mutta jonka arvon voi myös asettaa manuaalisesti.

import { signal, linkedSignal } from '@angular/core';

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

Miksi ei vain tavallista signaalia

Kerran alustettu tavallinen signaali säilyttäisi vanhentuneen arvon lähteen muuttumisen jälkeen. linkedSignal johtaa arvon uudelleen aina lähteen muuttuessa ja sallii silti kirjoittamisen muutosten välillä.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

source/computation-muoto

Edistyneessä muodossa source ja computation erotetaan toisistaan, ja käytettävissä on edellinen arvo — tästä on hyötyä, kun valinta halutaan säilyttää sen edelleen löytyessä.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

Käyttäjän valinnan säilyttäminen

Edellisen arvon toimintamalli säilyttää käyttäjän valinnan, jos se löytyy edelleen luettelon päivityksen jälkeen. Muussa tapauksessa käytetään oletusarvoa — tämä parantaa käyttökokemusta huomattavasti.

linkedSignal on kirjoitettava

Toisin kuin computed-signaalille, linkedSignalille voi kutsua metodeja .set() ja .update(). Manuaalisesti asetettu arvo säilyy, kunnes lähde muuttuu uudelleen.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

Toimintamalli: toisistaan riippuvat pudotusvalikot

Maa -> Kaupunki: kun maa muuttuu, kaupunki nollataan ensimmäiseen saatavilla olevaan vaihtoehtoon, mutta käyttäjä voi valita toisen.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

Toimintamalli: optimistinen käyttöliittymän tila

linkedSignal voi sisältää palvelimen datasta johdetun optimistisen arvon, jonka käyttöliittymä voi välittömästi ohittaa. Tila voidaan synkronoida uudelleen, kun tuoretta dataa saapuu.

Yhdistäminen effectien kanssa

Voit reagoida linkedSignalin muutoksiin effectillä esimerkiksi nykyisen valinnan säilyttämiseksi.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

Milloin linkedSignalia EI pidä käyttää

Jos johdettu arvo on puhtaasti vain luku -tyyppinen, käytä computed()-funktiota. Jos arvoa ei koskaan tarvitse nollata lähteen perusteella, käytä tavallista signal()-funktiota. Käytä linkedSignalia vain, kun tarvitset sekä kirjoitettavuutta että lähteen mukaan nollautuvuutta.

Edistynyt reaktiivinen verkko

signal -> computed -> linkedSignal -> effect muodostaa täydellisen reaktiivisen putken: raakasyötteet, puhtaat johdetut arvot, kirjoitettava ja nollautuva tila sekä sivuvaikutukset — kaikki ilman manuaalisia tilauksia.

Pikatesti

Testaa, miten hyvin ymmärrät linkedSignalia.

Vastaa interaktiivisessa oppitunnissa

Kertaus: linkedSignal ja edistyneet toimintamallit

linkedSignal() antaa sinulle kirjoitettavan tilan, joka palautuu lähteen perusteella.

Säilytä käyttäjän valinta lähde-/laskentamuodolla.
Sopii erinomaisesti toisistaan riippuvaisiin pudotusvalikoihin ja optimistiseen käyttöliittymään.
Käytä computed-arvoa vain luku -tilaan ja tavallista signaalia tilaan, joka ei palaudu.

Olet suorittanut Signals-kurssin.

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 ”linkedSignal ja edistyneet mallit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “linkedSignal ja edistyneet mallit”. 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 ”linkedSignal ja edistyneet mallit”?

Koordinoikaa riippuvaisia signaaleja reaktiivisesti. 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 ”linkedSignal ja edistyneet mallit”-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