Mitä ovat Angular Signals?

Question

Accepted Answer

**Signals** ovat Angularin reaktiivisia primitiivejä (lisätty Angularina 16+) tilan hallintaan — wrapper arvon ympärille, joka **ilmoittaa kuluttajille muutoksista**, mahdollistaen hienorakeisen, tehokkaan päivitykset ilman riippuvuutta Zone.js muutoksentunnistukseen. ## Signaalin luominen ja käyttö ```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 }); } } ``` ## Signaalin lukeminen: kutsu sitä funktiona ```html ``` Huomaa, että signaalit **luetaan kutsumalla niitä** (`count()`), ei tavallisina ominaisuuksina. Mallissa Angular seuraa tarkasti, mitä signaaleja näkymä lukee, joten vain vaikuttuneet osat päivittyvät, kun signaali muuttuu. ## Kolme signaalityyppiä ```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` on laiska ja välimuistissa (kuten Vuen computed); `effect` suorittaa sivuvaikutuksia reaktiivisesti (kuten watcher). ## Miksi signaalit ovat tärkeitä: hienorakeinen reaktiivisuus ```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 ``` Signaalit antavat Angularille **tarkkaa riippuvuuden seurantaa** — kun signaali muuttuu, vain näkymät ja computed, jotka todella lukevat sen, päivittyvät. Tämä on tehokkaampi kuin laaja muutoksentunnistus, jonka Zone.js laukaisee, ja se on perusta Zone.js:n täydelliselle poistamiselle (vyöhykeeton tila). ## Signaaliin perustuvat tulot (uudempi) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Miksi se on tärkeää Signaalit ovat Angularin reaktiivisuuden merkittävin viimeaikainen kehitysaskel — yksinkertaisempi, eksplisiittisempi ja paljon tehokkaampi malli kuin implisiittinen Zone.js muutoksentunnistus. Ne mahdollistavat hienorakeisen päivitykset, vähentävät tarpeettomia tarkistuksia, integroituvat puhtaasti computed/effect kanssa ja valmisteluvat polkua vyöhykkeettömälle Angularille. Signaalien ymmärtäminen on yhä oleellisempaa, koska Angular ohjaa uutta kehitystä kohti niitä oletusoletilman primitiivina.