Angular Academy · Lektion

Beregnede signals

Afled værdier, der opdateres automatisk.

Lektion 1 af 413 trin

Beregnede signals er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 1 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.

Hvad er et beregnet signal

Et computed()-signal udleder en værdi fra et eller flere andre signaler. Når et kildesignal ændres, beregnes den beregnede værdi igen lazy — kun når noget læser den.

Beregnede signaler er skrivebeskyttede: du kan ikke kalde .set() på dem.

Oprettelse af et computed-signal

Du sender en funktion til computed(). Angular holder automatisk styr på hvert signal, du læser i den.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Automatisk sporing af afhængigheder

Du skal aldrig deklarere afhængigheder manuelt. Når du læser price() og quantity() i callback-funktionen, registreres de automatisk som afhængigheder.

Hvis et signal læses betinget, men betingelsen ikke nås, spores det ikke under den kørsel.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Lazy evaluering og caching

Et computed-signal kører kun, når det læses, og gemmer sit resultat. Hvis du læser det to gange uden ændringer i kilderne, kører funktionen én gang.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Kædning af beregnede signaler

Beregnede signaler kan afhænge af andre beregnede signaler og dermed danne en reaktiv graf.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Brug af computed i en komponent

Beregnede signaler er særligt nyttige i komponenter. Skabelonen gengives kun igen, når den beregnede værdi faktisk ændres.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Beregnede signaler er skrivebeskyttede

Forsøg på at angive et beregnet signal giver en kompileringsfejl. De findes udelukkende for at udtrykke afledt tilstand.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Lighed og udeladte genberegninger

Et beregnet signal bruger som standard Object.is til sammenligning. Hvis den nye beregnede værdi er lig med den gamle, underrettes afhængige signaler ikke, så unødvendigt arbejde undgås.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Brugerdefineret lighedsfunktion

Du kan sende indstillingen equal for at styre, hvornår et beregnet signal anses for ændret — det er nyttigt til objekter eller arrays.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Undgå sideeffekter i computed

Et beregnet signal skal være rent: ingen HTTP-kald, ingen logning som adfærd og ingen ændring af andre signaler. Sideeffekter hører til i effect(). Når computed-signaler holdes rene, bliver den reaktive graf forudsigelig.

Beregnede signaler sammenlignet med metoder

En skabelonmetode kører ved hver ændringsregistreringscyklus. Et beregnet signal kører kun, når dets afhængigheder ændres, og gemmer resultatet — langt mere effektivt til afledte værdier.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Hurtig kontrol

Test din forståelse af beregnede signaler.

Besvar den i den interaktive lektion

Opsummering: Beregnede signaler

Du har lært, at computed() opretter skrivebeskyttede afledte signaler med automatisk sporing af afhængigheder, lazy evaluering og caching.

Hold dem rene — ingen sideeffekter.
De kan afhænge af andre beregnede signaler.
Brug equal til brugerdefineret registrering af ændringer.

Næste trin: kørsel af sideeffekter med effect().

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Beregnede signals” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Beregnede signals”, 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 “Beregnede signals”?

Afled værdier, der opdateres automatisk. 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 1 af 4.

Hvor lang tid tager lektionen “Beregnede signals”?

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

← Tilbage til Angular Academy