Angular Academy · Lektion

Uppdatera signaler med set och update

Ändra signalvärden reaktivt.

Lektion 3 av 413 steg

Uppdatera signaler med set och update är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 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.

Ändra en signal

En skrivbar signal kan ändras på två sätt: set() ersätter värdet och update() härleder ett nytt värde från det aktuella.

Använda set()

set(newValue) ersätter signalens värde helt med det värde du skickar in.

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

När ska set() användas?

Använd set() när det nya värdet inte beror på det gamla, till exempel när du tilldelar ett nytt värde från användarindata eller ett API-svar.

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

Använda update()

update(fn) tar en funktion som tar emot det aktuella värdet och returnerar det nya värdet. Det är idealiskt när nästa värde beror på det föregående.

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

Öka med update()

Den klassiska räknaren använder update() för att öka värdet baserat på det befintliga antalet.

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

Uppdatera objekt oföränderligt

Eftersom förändringsdetektering jämför referenser bör du ersätta objekt i stället för att ändra dem. Sprid det gamla värdet till ett nytt objekt.

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

Uppdatera arrayer oföränderligt

För arrayer ska du returnera en ny array. Undvik push/splice på den befintliga arrayen; använd spread eller arraymetoder som returnerar nya arrayer.

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

Sammanfattning av set() kontra update()

set: du har redan det slutliga värdet. update: du beräknar det slutliga värdet utifrån det aktuella. Båda meddelar konsumenterna om värdet faktiskt ändras.

Referenslikhet och förändringar

Signaler använder som standard likhet mellan referenser (eller värden för primitiva typer) för att avgöra om något har ändrats. Om du anger exakt samma primitiva värde för en signal meddelas inte beroenden.

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

Ändringar avråds från

Äldre API:er hade en metod mutate(), men den rekommenderade moderna metoden är oföränderliga uppdateringar där set() och update() returnerar nya referenser.

Uppdatera signaler i metoder

I komponenter bör du kapsla in signaluppdateringar i metoder som mallen kan anropa från händelsehanterare.

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

Snabbkontroll: set kontra update

Välj rätt verktyg för uppgiften.

Besvara frågan i den interaktiva lektionen

Sammanfattning: uppdatera signaler

Ni har lärt er set() för att ersätta ett värde och update(fn) för att härleda ett nytt värde från det aktuella. Ni har också sett hur objekt och arrayer uppdateras oföränderligt, så att referenslikhet kan upptäcka ändringen. Nästa steg är att använda signaler direkt i mallar.

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 ”Uppdatera signaler med set och update” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Uppdatera signaler med set och update”, 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 ”Uppdatera signaler med set och update”?

Ändra signalvärden reaktivt. 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 3 av 4.

Hur lång tid tar lektionen ”Uppdatera signaler med set och update”?

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

Vad är signaler
Skapa och läsa signaler
Uppdatera signaler med set och update
Signaler i mallar

← Tillbaka till Angular Academy