Angular 19: Differenza tra computed Signal e linkedSignal
Angular 19 ha introdotto un nuovo modello di reattività che rende più facile gestire lo stato e i calcoli automatici basati su segnali (signals). Tra le novità troviamo i computed signals e i linkedSignal, entrambi utili per creare valori derivati e reattivi, ma con differenze sostanziali. Vediamo insieme come funzionano e quando conviene usare uno o l’altro!
1. Computed Signal: Valori Derivati Reattivi
Il computed signal è un segnale read-only (solo in lettura) che si aggiorna automaticamente quando i segnali di cui dipende cambiano. Praticamente, è come una “formula reattiva” che si ricalcola ogni volta che cambia uno dei segnali sorgente.
🧑💻 Esempio Pratico con computed
Immagina di avere un’app che calcola il doppio di un numero base. Con computed, non hai bisogno di aggiornare manualmente il valore derivato: si aggiorna automaticamente!
import { signal, computed } from '@angular/core';
// Dichiarazione di un segnale di base
const baseValue = signal(5);
// Computed signal che raddoppia il valore di base
const doubleValue = computed(() => baseValue() * 2);
console.log(doubleValue()); // Output: 10
baseValue.set(7);
console.log(doubleValue()); // Output: 14
In questo caso, doubleValue cambia automaticamente quando cambia baseValue. Però attenzione: non puoi modificarlo direttamente! Il computed signal è “bloccato” sulla sua formula e reagisce solo ai cambiamenti dei segnali sorgente. Questo è ottimo quando hai bisogno di un valore che si aggiorna in modo prevedibile, senza il rischio di modifiche dirette.
Quando Usare un computed Signal?
Utilizza un computed quando vuoi calcolare un valore derivato che dipende in modo fisso da altri segnali. È perfetto per situazioni dove hai bisogno di una reattività semplice e automatica, ad esempio per calcoli che non devono mai essere alterati manualmente.
2. linkedSignal: Flessibilità e Aggiornamenti Bidirezionali
Con il linkedSignal, invece, hai la possibilità di creare segnali che si aggiornano in base a uno o più segnali sorgente, ma con una differenza importante: puoi anche modificare direttamente il valore del linkedSignal, senza influenzare i segnali da cui è derivato.
🧑💻 Esempio Pratico con linkedSignal
Supponiamo di voler calcolare il triplo di un numero di base ma, a differenza del computed, vogliamo poter sovrascrivere il risultato manualmente. Con linkedSignal, puoi farlo!
import { signal, linkedSignal } from '@angular/core';
// Segnale di base
const baseValue = signal(10);
// linkedSignal che calcola il triplo di baseValue
const tripleValue = linkedSignal(baseValue, (val) => val * 3);
console.log(tripleValue()); // Output: 30
// Sovrascrivo il valore del linkedSignal senza cambiare baseValue
tripleValue.set(45);
console.log(tripleValue()); // Output: 45
// baseValue rimane 10, anche se ho cambiato triploValue
console.log(baseValue()); // Output: 10
Come vedi, triploValue si inizializza come tre volte baseValue, ma possiamo sovrascrivere il valore senza toccare il baseValue. Questa caratteristica rende il linkedSignal ideale quando hai bisogno di calcoli reattivi, ma vuoi comunque mantenere la libertà di impostare valori specifici.
📌 Quando Usare un linkedSignal?
Il linkedSignal è utile quando hai una relazione di dipendenza che deve rimanere reattiva, ma vuoi anche poter aggiornare il valore derivato indipendentemente. Questo è perfetto in scenari interattivi, ad esempio, per gestire input utente che devono aggiornarsi con lo stato dell’app ma possono anche essere modificati.
Riepilogo: Scegliere tra computed e linkedSignal
| Funzionalità | computed |
linkedSignal |
|---|---|---|
| Modificabile | No | Sì |
| Calcolo Automatico | Sì, al cambiamento del sorgente | Sì, ma può essere sovrascritto |
| Ideale per | Valori derivati semplici e fissi | Valori derivati con modifiche dirette |
Con Angular 19, quindi, hai a disposizione strumenti potenti per gestire al meglio lo stato e i calcoli automatici. Ricorda: computed è per valori che devono seguire in modo rigido i segnali sorgente, mentre linkedSignal offre una flessibilità maggiore, permettendoti di aggiornare i valori direttamente se necessario.
Con queste novità Angular punta a rendere il modello reattivo sempre più versatile e modulare, lasciandoti il controllo su come e quando gestire i cambiamenti di stato nelle tue applicazioni.