Co jsou Angular Signals?

Question

Accepted Answer

**Signals** jsou primitivní reaktivní prvky Angular (přidáno v Angular 16+) pro správu stavu — wrapper kolem hodnoty, který **upozorňuje spotřebitele na změny**, umožňuje jemně granulované, efektivní aktualizace bez závislosti na detekci změn Zone.js. ## Vytváření a používání signálu ```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 }); } } ``` ## Čtení signálu: zavolejte jej jako funkci ```html ``` Upozorňujeme, že signály jsou **čteny jejich voláním** (`count()`), ne jako prostě vlastnosti. V šabloně Angular přesně sleduje, které signály zobrazení čte, takže se aktualizují pouze ovlivněné části, když se signál změní. ## Tři typy signálů ```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` je lenivý a cachovaný (jako Vue computed); `effect` reaktivně spouští vedlejší efekty (jako watcher). ## Proč signály záleží: jemně granulovaná reaktivita ```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 ``` Signály umožňují Angular **přesné sledování závislostí** — když se signál změní, aktualizují se pouze zobrazení a computed, která jej skutečně čtou. To je efektivnější než rozsáhlá detekce změn, kterou spouští Zone.js, a je základem pro úplné odstranění Zone.js (režim bez zóny). ## Signálové vstupy (novější) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Proč je to důležité Signály jsou nejdůležitější nedávným vývojem v reaktivitě Angular — jednodušší, explicitnější a mnohem efektivnější model než implicitní detekce změn Zone.js. Umožňují jemně granulované aktualizace, snižují zbytečné kontroly, čistě se integrují s computed/effect a připravují cestu k bezzonálnímu Angular. Pochopení signálů je stále důležitější, protože Angular směruje nový vývoj k jejich používání jako výchozího primitivu stavu.