Czym są Angular Signals?

Question

Accepted Answer

**Signals** to Angular's reaktywny primityw (dodany w Angular 16+) do zarządzania stanem — wrapper wokół wartości, który **powiadamia konsumentów kiedy się zmienia**, umożliwiając precyzyjne, efektywne aktualizacje bez polegania na change detection Zone.js. ## Tworzenie i używanie sygnału ```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 }); } } ``` ## Odczytywanie sygnału: wywołaj go jak funkcję ```html ``` Zwróć uwagę, że sygnały są **odczytywane przez wywołanie ich** (`count()`), a nie jako zwykłe właściwości. W template Angular dokładnie śledzi, które sygnały widok odczytuje, więc tylko dotknięte części aktualizują się, gdy sygnał się zmienia. ## Trzy typy sygnałów ```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` jest leniwe i buforowane (jak Vue's computed); `effect` reaktywnie uruchamia efekty uboczne (jak watcher). ## Dlaczego sygnały mają znaczenie: precyzyjnie reaktywność ```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 ``` Sygnały dają Angular **precyzyjne śledzenie zależności** — gdy sygnał się zmienia, aktualizują się tylko widoki i computed'y, które faktycznie go odczytują. To jest bardziej efektywne niż szerokie change detection wyzwalane przez Zone.js i stanowi podstawę do całkowitego usunięcia Zone.js (tryb bezzonowy). ## Sygnałowe wejścia (nowsze) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Dlaczego to ważne Sygnały to najistotniejsza niedawna ewolucja w reaktywności Angular — prostszy, bardziej jawny i znacznie bardziej efektywny model niż niejawne change detection Zone.js. Umożliwiają precyzyjne aktualizacje, zmniejszają zbędne sprawdzenia, bezproblemowo integrują się z computed/effect i torują drogę do Angular bez stref. Rozumienie sygnałów staje się coraz bardziej niezbędne, ponieważ Angular kieruje nowy rozwój ku nim jako domyślny primityw stanu.