Что такое Angular Signals?

Question

Accepted Answer

**Signals** — это реактивный примитив Angular (добавлен в Angular 16+) для управления состоянием — обёртка вокруг значения, которая **уведомляет потребителей об изменении**, позволяя использовать fine-grained, эффективные обновления без зависимости от обнаружения изменений Zone.js. ## Создание и использование сигнала ```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 }); } } ``` ## Чтение сигнала: вызовите его как функцию ```html ``` Обратите внимание, что сигналы **читаются путём их вызова** (`count()`), а не как обычные свойства. В шаблоне Angular отслеживает ровно, какие сигналы читает представление, поэтому обновляются только затронутые части при изменении сигнала. ## Три типа сигналов ```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` — ленивое и кэшируемое (как Vue's computed); `effect` выполняет побочные эффекты реактивно (как watcher). ## Почему сигналы важны: fine-grained реактивность ```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 ``` Сигналы обеспечивают Angular **точное отслеживание зависимостей** — при изменении сигнала обновляются только представления и computeds, которые его действительно читают. Это эффективнее, чем широкое обнаружение изменений, которое запускает Zone.js, и является основой для полного удаления Zone.js (режим без зон). ## Входные сигналы (более новые) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Почему это важно Сигналы — это наиболее значительное недавнее развитие в реактивности Angular — более простая, явная и намного более эффективная модель, чем неявное обнаружение изменений Zone.js. Они позволяют fine-grained обновления, снижают ненужные проверки, чисто интегрируются с computed/effect и прокладывают путь к Angular без зон. Понимание сигналов становится всё более важным, поскольку Angular направляет новую разработку на них как на примитив состояния по умолчанию.