Angular Academy · Lektion

Effects og sideeffekter

Reagér på signalændringer med effects.

Lektion 2 af 413 trin

Effects og sideeffekter er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 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 en effekt

En effect() kører en funktion, hver gang et signal, den læser, ændres. I modsætning til computed bruges effekter til sideeffekter: logning, synkronisering med localStorage, API-kald og ændring af DOM'en.

Effekter returnerer ikke en værdi.

Oprettelse af en effekt

En effekt kører én gang med det samme og kører derefter igen, hver gang et sporet signal ændres.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effekter kræver en injectionskontekst

Som standard skal effect() oprettes i en injectionskontekst — typisk i en konstruktør eller en feltinitialisering i en komponent, et direktiv eller en service.

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

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Automatisk sporing af afhængigheder

Ligesom computed sporer effekter præcis de signaler, de læser under kørsel. Betingede læsninger spores kun, når de nås.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Synkronisering af signaler med localStorage

Et klassisk anvendelsesområde for effekter er at gemme tilstanden, hver gang den ændres.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effekter returnerer ikke værdier

Hvis du har brug for en afledt værdi, skal du bruge computed(). Effekter bruges til handlinger uden returværdi; deres resultat er selve sideeffekten.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Angivelse af signaler i effekter

Som standard tillader Angular ikke skrivning til signaler i en effekt for at forhindre løkker. Hvis du virkelig har brug for det, skal du sende { allowSignalWrites: true } — men foretræk computed til afledninger.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Manuel oprydning med EffectRef

effect() returnerer en EffectRef. Kald .destroy() for manuelt at stoppe den, før ejeren destrueres.

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effekter ryddes automatisk op

Når en effekt oprettes i en komponent, destrueres den automatisk, når komponenten destrueres. Du behøver sjældent selv at kalde .destroy().

Effekter kører efter gengivelse

Effekter planlægges og kører efter ændringsregistrering i batches pr. mikrotask. Flere synkrone ændringer af signaler udløser kun effekten én gang.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Hvornår skal du bruge effect i stedet for computed

computed: udled en værdi fra signaler (rent).
effect: reager på signaler ved at gøre noget eksternt (urent).

Hvis du opdager, at du returnerer en værdi fra en effekt, har du sandsynligvis brug for et beregnet signal.

Hurtig kontrol

Test din forståelse af effekter.

Besvar den i den interaktive lektion

Opsummering: Effekter

effect() kører en funktion, hver gang dens sporede signaler ændres, og bruges kun til sideeffekter.

Kører én gang med det samme og derefter ved hver ændring af en afhængighed.
Kræver en injectionskontekst.
Destrueres automatisk sammen med sin ejer og returnerer en EffectRef til manuel styring.
Brug computed til afledninger og effect til handlinger.

Næste trin: oprydning af ressourcer i effekter.

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 “Effects og sideeffekter” gratis?

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

Reagér på signalændringer med effects. 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 2 af 4.

Hvor lang tid tager lektionen “Effects og sideeffekter”?

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