Kas yra Angular Signals?

Question

Accepted Answer

**Signals** yra Angular reaktyvusis primitivas (pridėtas Angular 16+) būsenai valdyti — reikšmės apvalkalas, kuris **pranešta vartotojams apie pakeitimus**, įgalinant smulkias, efektyvias atnaujinimus be pasikliovimo Zone.js pakeitimų aptikimu. ## Signalo kūrimas ir naudojimas ```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 }); } } ``` ## Signalo skaitymas: iškviesti jį kaip funkciją ```html ``` Atkreipkite dėmesį, kad signalai skaitomi **juos iškviečiant** (`count()`), o ne kaip paprastų savybių. Šablone Angular tiksliai seka, kuriuos signalus skaito rodinys, todėl keičiantis signalui, atnaujinamos tik paveiktos dalys. ## Trys signalo tipai ```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` yra iš anksto apskaičiuotas ir išsaugomas (kaip Vue computed); `effect` reaktyviai vykdo šaliutines efektus (kaip stebukleivis). ## Kodėl signalai yra svarbūs: smulkioji reaktyvumas ```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 ``` Signalai suteikia Angular **tikslų priklausomybės sekimą** — kai signalo pokytis, tik rodinio ir skaičiavimų, kurie jį iš tikrųjų skaito, atnaujinami. Tai yra efektyviau nei platus pakeitimų aptikimas, kurį suaktyvina Zone.js, ir yra pagrindas visiškai pašalinti Zone.js (režim be zonių). ## Signalo pagrindu grindžiamos įvestys (naujesnis) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Kodėl tai svarbu Signalai yra reikšmingiausias šiuolaikinis Angular reaktyvumo evolucija — paprastesnis, aiškesnis ir daug efektyvesnis modelis nei neatskleistas Zone.js pakeitimų aptikimas. Jie leidžia smulkias atnaujinimus, sumažina nereikalingus patikrinimus, integruojasi griežtai su computed/effect ir kelią kelią į zoneless Angular. Supratimas signalų tampa vis labiau būtinas, nes Angular naują plėtrą nukreipia link signalų kaip numatytojo būsenos primityvaus.