Computed og metoder
Tilføj afledt tilstand og opdateringsmetoder.
Computed og metoder er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Ud over rå tilstand
Et nyttigt lager eksponerer afledte værdier og adfærd. SignalStore tilføjer dette med withComputed til læsemodeller og withMethods til handlinger.
withComputed
withComputed modtager lagerets aktuelle signaler og returnerer et objekt med computed()-signaler. De memoisere og opdateres automatisk som alle andre beregnede signaler.
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))
}))
);Læsning af beregnede værdier
Beregnede medlemmer vises på lageret ligesom tilstand. Læs store.count() og store.total() i skabeloner; de opdateres, når items ændres.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods modtager lageret og returnerer navngivne metoder. Brug patchState internt til at opdatere tilstanden uforanderligt.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Metoder kan også læse tilstand
I en metode kan du læse aktuelle signaler fra lagerargumentet for at træffe beslutninger, før du anvender en ændring.
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)
}));
}
}))Metoder kan bruge computed
Fordi withComputed kører før withMethods, kan metoder læse beregnede medlemmer, som lageret allerede eksponerer.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Injektion af afhængigheder
withMethods kører i en injektionskontekst, så du kan kalde inject() internt for at hente tjenester som HttpClient eller en router.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Rækkefølgen af funktioner
Funktioner sammensættes oppefra og ned. Placér withState først, derefter withComputed (læser tilstand) og så withMethods (læser tilstand og beregnede værdier). Hvis du vender rækkefølgen om, opstår der typefejl.
Indkapsling
Komponenter kalder store.add(item) eller læser store.total(). De kalder aldrig patchState direkte, så al ændringslogik forbliver inde i lageret.
Rene beregnede værdier, metoder med bivirkninger
Hold withComputed-funktioner rene (de må kun aflede værdier). Placér bivirkninger som HTTP-kald eller navigation i withMethods.
Test af metoder
SignalStores er klasser, der kan injiceres. I test skal du angive lageret via TestBed, kalde en metode og derefter synkront kontrollere tilstanden og de beregnede signaler.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Hurtigt tjek
Test din forståelse af beregnede værdier og metoder.
Opsummering
Du har udvidet et SignalStore med withComputed til memoiserede læsemodeller og withMethods til indkapslede handlinger, der bruger patchState og injicerede tjenester. Funktionsrækkefølgen sikrer, at hvert lag kan læse de lag, der kommer før det.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Computed og metoder” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Computed og metoder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Computed og metoder”?
Tilføj afledt tilstand og opdateringsmetoder. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Computed og metoder”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af en SignalStore
- Computed og metoder
- rxMethod til asynkront arbejde
- Entiteter og brugerdefinerede funktioner