Was sind Angular Signals?

Question

Accepted Answer

**Signals** sind Angulars reaktive Primitive (hinzugefügt in Angular 16+) zur Zustandsverwaltung — ein Wrapper um einen Wert, der **Nutzer benachrichtigt, wenn er sich ändert**, und ermöglicht feinkörnige, effiziente Updates ohne Abhängigkeit von Zone.js-Änderungserkennung. ## Erstellen und Verwenden eines Signals ```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 }); } } ``` ## Lesen eines Signals: Rufen Sie es wie eine Funktion auf ```html ``` Beachten Sie, dass Signals **durch Aufrufen gelesen werden** (`count()`), nicht als einfache Eigenschaften. In der Vorlage verfolgt Angular präzise, welche Signals eine View liest, sodass nur die betroffenen Teile aktualisiert werden, wenn sich ein Signal ändert. ## Die drei Signaltypen ```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` ist lazy und gecacht (wie Vues computed); `effect` führt Nebenwirkungen reaktiv aus (wie ein Watcher). ## Warum Signals wichtig sind: Feinkörnige Reaktivität ```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 ``` Signals ermöglichen Angular **präzise Abhängigkeitsverfolgung** — wenn sich ein Signal ändert, werden nur die Views und Computeds aktualisiert, die es tatsächlich lesen. Dies ist effizienter als die umfassende Änderungserkennung, die Zone.js auslöst, und ist die Grundlage für die vollständige Entfernung von Zone.js (Zoneless Mode). ## Signalbasierte Eingaben (neuere) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Warum es wichtig ist Signals sind die bedeutendste jüngste Entwicklung in Angulars Reaktivität — ein einfacheres, expliziteres und weit effizienteres Modell als die implizite Zone.js-Änderungserkennung. Sie ermöglichen feinkörnige Updates, reduzieren unnötige Kontrollen, integrieren sich sauber mit computed/effect und ebnen den Weg für zoneless Angular. Das Verständnis von Signals wird zunehmend essentiell, da Angular die neue Entwicklung auf sie als Standard-State-Primitive ausrichtet.