Hvad er Angular Signals?

Question

Accepted Answer

**Signals** er Angulars reaktive primitive (tilføjet i Angular 16+) til tilstandsstyring — en wrapper omkring en værdi, der **meddeler forbrugere om ændringer**, og muliggør finkornet, effektive opdateringer uden at være afhængig af Zone.js ændringsdetektion. ## Oprettelse og brug af et signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## Læsning af et signal: kald det som en funktion ```html ``` Bemærk at signaler **læses ved at kalde dem** (`count()`), ikke som almindelige egenskaber. I skabelonen sporer Angular præcist, hvilke signaler et view læser, så kun de berørte dele opdateres, når et signal ændres. ## De tre signaltyper ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` er lazy og cached (som Vues computed); `effect` kører bivirkninger reaktivt (som en watcher). ## Hvorfor signaler betyder noget: finkornet reaktivitet ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Signaler giver Angular **præcis afhængighedssporing** — når et signal ændres, opdateres kun de views og computeds, der faktisk læser det. Dette er mere effektivt end den brede ændringsdetektion, som Zone.js udløser, og er grundlaget for at fjerne Zone.js helt (zoneless mode). ## Signalbaserede inputs (nyere) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Hvorfor det betyder noget Signaler er den vigtigste nylige udvikling i Angulars reaktivitet — en enklere, mere eksplicit og langt mere effektiv model end den implicitte Zone.js ændringsdetektion. De muliggør finkornet opdateringer, reducerer unødvendige kontroller, integreres rent med computed/effect, og baner vejen for zoneless Angular. Forståelse af signaler bliver stadig vigtigere, da Angular styrer ny udvikling mod dem som den standardiserede tilstandsprimitive.