Angular Academy · Lektion

Härleda tillstånd med computed

Bygg läsmodeller från grundtillstånd.

Lektion 2 av 413 steg

Härleda tillstånd med computed är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Härlett tillstånd

Ofta beräknas tillstånd från annat tillstånd: en totalsumma från artiklar, en filtrerad lista eller en giltighetsflagga. Angulars computed() skapar en skrivskyddad signal vars värde härleds från andra signaler.

Skapa en computed

Skicka en funktion till computed(). Den läser andra signaler och returnerar ett värde. Resultatet beräknas på nytt endast när ett av dess beroenden ändras.

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

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Automatisk beroendespårning

Ni behöver aldrig deklarera beroenden. Alla signaler som läses i funktionen blir automatiskt beroenden. Ändra qty så beräknas total om; ändra en orelaterad signal så görs inget.

Memoisering

computed() cachar sitt resultat. Om ni läser det många gånger körs funktionen en gång tills ett beroende ändras. Därför blir härledda läsmodeller billiga även när de används i många bindningar i mallen.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed i ett förråd

Exponera beräknade läsmodeller i ett signalförråd så att komponenterna använder färdiga värden i stället för att göra om beräkningarna i mallarna.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Kedja computed

Beräknade signaler kan läsa andra beräknade signaler. Bygg läsmodeller i lager där en grundläggande härledning matar en modell på högre nivå.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtrering och sökning

En vanlig läsmodell är att filtrera en lista med hjälp av en söksignal. Det filtrerade resultatet uppdateras när listan eller sökfrågan ändras.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Inga sidoeffekter

En funktion i computed() måste vara ren: den får endast läsa signaler och returnera ett värde. Ändra inte tillstånd, anropa inte API:er och skriv inte till andra signaler där. Använd i stället effect() för sidoeffekter.

Jämlikhet och överhoppade uppdateringar

Som standard använder computed referenslikhet (Object.is) för att avgöra om värdet har ändrats. Om det nya värdet är lika med det gamla meddelas konsumenterna inte, vilket undviker onödigt arbete.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Använda computed i mallar

Läs beräknade signaler i mallar på samma sätt som alla andra signaler. Angular uppdaterar endast de bindningar vars beräknade värde faktiskt har ändrats.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed jämfört med metoder

Använd computed() för värden som härleds från tillstånd och ska uppdateras automatiskt samt memoisera resultatet. Använd en vanlig metod för engångsberäkningar som tar argument eller ska köras på begäran.

Snabbtest

Testa er förståelse av beräknade signaler.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har byggt härlett tillstånd med computed(): automatisk beroendespårning, memoisering av rena funktioner, kedjbara läsmodeller och överhoppade uppdateringar med hjälp av jämlikhet. Exponera beräknade läsmodeller från förråd så att mallarna förblir deklarativa.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Härleda tillstånd med computed” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Härleda tillstånd med computed”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Härleda tillstånd med computed”?

Bygg läsmodeller från grundtillstånd. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Härleda tillstånd med computed”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy