Angular Academy · Lektion

Opdatering af signals med set og update

Ændr signalværdier reaktivt.

Lektion 3 af 413 trin

Opdatering af signals med set og update er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 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.

Ændring af et signal

Et skrivbart signal kan ændres på to måder: set() erstatter værdien, og update() udleder en ny værdi fra den aktuelle.

Brug af set()

set(newValue) erstatter signalværdien helt med den værdi, du angiver.

const c = signal(0);
c.set(1);
console.log(c()); // 1

Hvornår skal set() bruges?

Brug set(), når den nye værdi ikke afhænger af den gamle, f.eks. når du tildeler en ny værdi fra brugerinput eller et API-svar.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

Brug af update()

update(fn) tager en funktion, der modtager den aktuelle værdi og returnerer den nye værdi. Den er ideel, når den næste værdi afhænger af den forrige.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

Inkrementering med update()

Den klassiske tæller bruger update() til at øge værdien baseret på det eksisterende antal.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

Uforanderlig opdatering af objekter

Da ændringsregistrering sammenligner referencer, skal du erstatte objekter i stedet for at ændre dem direkte. Spred den gamle værdi ind i et nyt objekt.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

Uforanderlig opdatering af arrays

For arrays skal du returnere et nyt array. Undgå push/splice på det eksisterende array; brug spread eller array-metoder, der returnerer nye arrays.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

Opsummering af set() kontra update()

set: Du har allerede den endelige værdi. update: Du beregner den endelige værdi ud fra den aktuelle. Begge underretter forbrugere, hvis værdien faktisk ændres.

Referencelighed og ændringer

Signaler bruger som standard lighed mellem referencer (eller værdier for primitive typer) til at afgøre, om noget er ændret. Hvis et signal sættes til nøjagtig den samme primitive værdi, underrettes afhængige dele ikke.

const c = signal(5);
c.set(5); // no change, dependents not notified

Direkte ændring frarådes

Ældre API'er havde en mutate()-metode, men den anbefalede moderne tilgang er uforanderlige opdateringer med set() og update(), der returnerer nye referencer.

Opdatering af signaler i metoder

I komponenter skal du pakke signalopdateringer ind i metoder, som skabelonen kan kalde fra hændelsesbehandlere.

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

Hurtigt tjek: set vs update

Vælg det rigtige værktøj til opgaven.

Besvar den i den interaktive lektion

Opsummering: Opdatering af signaler

Du lærte at bruge set() til at erstatte en værdi og update(fn) til at udlede en ny værdi ud fra den aktuelle værdi. Du så også, hvordan du opdaterer objekter og arrays immutabelt, så referencelighed kan registrere ændringen. Næste trin: Brug af signaler direkte i skabeloner.

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 “Opdatering af signals med set og update” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Opdatering af signals med set og update”, 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 “Opdatering af signals med set og update”?

Ændr signalværdier reaktivt. 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 3 af 4.

Hvor lang tid tager lektionen “Opdatering af signals med set og update”?

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