Τι είναι τα Angular Signals;

Question

Accepted Answer

**Signals** είναι τα αντιδραστικά πρωτόγονα του Angular (προστέθηκαν στο Angular 16+) για τη διαχείριση κατάστασης — ένα wrapper γύρω από μια τιμή που **ειδοποιεί τους καταναλωτές όταν αλλάζει**, ενεργοποιώντας λεπτοζερνή, αποδοτική ενημέρωση χωρίς να βασίζεται στην ανίχνευση αλλαγών Zone.js. ## Δημιουργία και χρήση ενός Signal ```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 }); } } ``` ## Ανάγνωση ενός Signal: καλέστε το ως συνάρτηση ```html ``` Σημειώστε ότι τα signals **διαβάζονται καλώντας τα** (`count()`), όχι ως απλές ιδιότητες. Στο template, το Angular παρακολουθεί με ακρίβεια ποια signals διαβάζει μια προβολή, οπότε μόνο τα επηρεασμένα μέρη ενημερώνονται όταν ένα signal αλλάζει. ## Οι τρεις τύποι Signal ```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` είναι νεμέστερος και κρυμμένος στο cache (όπως το Vue's computed); `effect` εκτελεί παρενέργειες αντιδραστικά (όπως ένα watcher). ## Γιατί τα Signals έχουν σημασία: λεπτοζερνή αντιδραστικότητα ```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 ``` Τα Signals δίνουν στο Angular **ακριβή παρακολούθηση εξαρτήσεων** — όταν ένα signal αλλάζει, ενημερώνονται μόνο οι προβολές και τα computed που το διαβάζουν πραγματικά. Αυτό είναι πιο αποδοτικό από την ευρεία ανίχνευση αλλαγών που ενεργοποιεί το Zone.js, και είναι το θεμέλιο για την πλήρη κατάργηση του Zone.js (λειτουργία χωρίς ζώνη). ## Σήματα βασισμένα σε εισόδους (νεότερα) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Γιατί έχει σημασία Τα Signals είναι η πιο σημαντική πρόσφατη εξέλιξη στην αντιδραστικότητα του Angular — ένα απλούστερο, πιο ρητό και πολύ πιο αποδοτικό μοντέλο από την έμμεση ανίχνευση αλλαγών Zone.js. Ενεργοποιούν λεπτοζερνές ενημερώσεις, μειώνουν τους περιττούς ελέγχους, ενσωματώνονται καθαρά με computed/effect και ανοίγουν τον δρόμο για το Angular χωρίς ζώνη. Η κατανόηση των signals είναι όλο και πιο ουσιώδης, καθώς το Angular κατευθύνει τη νέα ανάπτυξη προς τα μέσα ως το προεπιλεγμένο πρωτόγονο κατάστασης.