Angular Academy · Oppitunti

Computed-arvot ja metodit

Lisätkää johdettu tila ja päivitysmetodeja

Oppitunti 2/413 vaihetta

Computed-arvot ja metodit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Raakatilaa pidemmälle

Hyödyllinen store tarjoaa johdettuja arvoja ja toimintaa. SignalStore lisää ne withComputed-toiminnolla näkymämalleja ja withMethods-toiminnolla toimintoja varten.

withComputed

withComputed vastaanottaa storen nykyiset signaalit ja palauttaa computed()-signaaleja sisältävän olion. Ne välimuistittavat arvonsa ja päivittyvät automaattisesti kuten muutkin computed-signaalit.

import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';

export const CartStore = signalStore(
  withState({ items: [] as Item[] }),
  withComputed(({ items }) => ({
    count: computed(() => items().length),
    total: computed(() => items().reduce((s, i) => s + i.price, 0))
  }))
);

Computed-arvojen lukeminen

Computed-jäsenet näkyvät storessa samalla tavalla kuin tila. Lukekaa malleissa store.count() ja store.total(); ne päivittyvät, kun items muuttuu.

template: 'Items: {{ store.count() }} — {{ store.total() }}'

withMethods

withMethods vastaanottaa storen ja palauttaa nimettyjä metodeja. Käyttäkää niiden sisällä patchState-funktiota tilan muuttumattomaan päivittämiseen.

import { withMethods, patchState } from '@ngrx/signals';

withMethods((store) => ({
  add(item: Item) {
    patchState(store, (s) => ({ items: [...s.items, item] }));
  },
  clear() {
    patchState(store, { items: [] });
  }
}))

Metodit lukevat myös tilaa

Metodin sisällä voitte lukea storen argumentin nykyisiä signaaleja ja tehdä päätöksiä ennen tilan päivittämistä.

withMethods((store) => ({
  toggle(id: string) {
    const exists = store.items().some(i => i.id === id);
    if (!exists) return;
    patchState(store, (s) => ({
      items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
    }));
  }
}))

Metodit voivat käyttää computed-arvoja

Koska withComputed suoritetaan ennen withMethods-ominaisuutta, metodit voivat lukea computed-jäsenet, jotka store jo tarjoaa.

withMethods((store) => ({
  checkout() {
    if (store.total() === 0) return;
    // proceed...
  }
}))

Riippuvuuksien injektoiminen

withMethods suoritetaan injektiokontekstissa, joten voitte kutsua sen sisällä inject()-funktiota palveluiden, kuten HttpClientin tai reitittimen, hakemiseen.

withMethods((store, http = inject(HttpClient)) => ({
  load() {
    http.get<Item[]>('/api/items')
      .subscribe(items => patchState(store, { items }));
  }
}))

Ominaisuuksien järjestys

Ominaisuudet koostetaan ylhäältä alas. Asettakaa ensin withState, sitten withComputed (lukee tilaa) ja lopuksi withMethods (lukee tilaa ja computed-arvoja). Järjestyksen vaihtaminen aiheuttaa tyyppivirheitä.

Kapselointi

Komponentit kutsuvat store.add(item)-metodia tai lukevat store.total()-arvon. Ne eivät koskaan kutsu patchState-funktiota suoraan, joten kaikki muutoslogiikka pysyy storessa.

Puhtaat computed-arvot, sivuvaikutukselliset metodit

Pidättehän withComputed-funktiot puhtaina (vain johtaminen). Sijoittakaa sivuvaikutukset, kuten HTTP-kutsut tai navigointi, withMethods-ominaisuuteen.

Metodien testaaminen

SignalStoret ovat injektoitavia luokkia. Tarjotkaa testeissä store TestBedin kautta, kutsukaa metodia ja tarkistakaa sitten tila sekä computed-signaalit synkronisesti.

const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);

Pikatarkistus

Tarkistakaa, miten hyvin ymmärrätte computed-arvot ja metodit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Laajensitte SignalStorea withComputed-toiminnolla välimuistitettuihin näkymämalleihin ja withMethods-toiminnolla kapseloituihin toimintoihin, jotka käyttävät patchState-funktiota ja injektoituja palveluita. Ominaisuuksien järjestys varmistaa, että kukin kerros voi lukea sitä edeltäviä kerroksia.

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 ”Computed-arvot ja metodit” ilmainen?

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

Lisätkää johdettu tila ja päivitysmetodeja 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 2/4.

Kuinka kauan ”Computed-arvot ja metodit”-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