Computed en methods
Voeg afgeleide state en updatemethods toe
Computed en methods is een gratis Angular Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Verder dan ruwe status
Een bruikbare statusopslag stelt afgeleide waarden en gedrag beschikbaar. SignalStore voegt die toe met withComputed voor leesmodellen en withMethods voor acties.
withComputed
withComputed ontvangt de huidige signalen van de statusopslag en retourneert een object met signalen van computed(). Deze onthouden hun resultaat en worden automatisch bijgewerkt, net als elke computed.
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 lezen
Computed-leden verschijnen op de statusopslag net als status. Lees store.count() en store.total() in templates; ze worden bijgewerkt wanneer items verandert.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods ontvangt de statusopslag en retourneert benoemde methoden. Gebruik daarin patchState om de status onveranderlijk bij te werken.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Methoden lezen ook status
Binnen een methode kun je de huidige signalen uit het argument van de statusopslag lezen om beslissingen te nemen voordat je de status bijwerkt.
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)
}));
}
}))Methoden kunnen computed gebruiken
Omdat withComputed vóór withMethods wordt uitgevoerd, kunnen methoden computed-leden lezen die al door de statusopslag beschikbaar zijn gesteld.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Afhankelijkheden injecteren
withMethods wordt uitgevoerd in een injectiecontext, dus je kunt daarbinnen inject() aanroepen om services zoals HttpClient of een router op te halen.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Volgorde van functionaliteiten
Functionaliteiten worden van boven naar beneden samengesteld. Plaats eerst withState, daarna withComputed (leest status) en vervolgens withMethods (leest status en computed). Omkeren veroorzaakt typefouten.
Inkapseling
Componenten roepen store.add(item) aan of lezen store.total(). Ze roepen nooit rechtstreeks patchState aan, zodat alle mutatielogica binnen de statusopslag blijft.
Pure computed, methoden met bijwerkingen
Houd functies van withComputed puur: ze mogen alleen afleiden. Plaats bijwerkingen, zoals HTTP-aanroepen of navigatie, binnen withMethods.
Methoden testen
SignalStores zijn injecteerbare klassen. Geef de statusopslag in tests via TestBed op, roep een methode aan en controleer daarna synchroon de status en computed-signalen.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Korte controle
Controleer je begrip van computed en methoden.
Samenvatting
Je hebt een SignalStore uitgebreid met withComputed voor gememoiseerde leesmodellen en withMethods voor ingekapselde acties die patchState en geïnjecteerde services gebruiken. Door de volgorde van functionaliteiten kan elke laag de lagen ervoor lezen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Computed en methods” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Computed en methods”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Computed en methods”?
Voeg afgeleide state en updatemethods toe Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Computed en methods”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een SignalStore maken
- Computed en methods
- rxMethod voor asynchroon werk
- Entiteiten en aangepaste features