Angular Academy · Lezione

linkedSignal e pattern avanzati

Coordini reattivamente i signal dipendenti.

linkedSignal e pattern avanzati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Il problema risolto da linkedSignal

A volte è necessario uno stato scrivibile che si reimposti quando cambia una sorgente. Un computed semplice è di sola lettura; un signal semplice non si reimposta automaticamente. linkedSignal() colma questa lacuna: è uno stato scrivibile derivato da una sorgente.

linkedSignal di base

Passi una funzione di calcolo. Il risultato è un signal scrivibile che viene ricalcolato quando cambia la sorgente, ma che può anche essere impostato manualmente.

import { signal, linkedSignal } from '@angular/core';

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

Perché non usare semplicemente un signal?

Un signal semplice inizializzato una sola volta conserverebbe un valore obsoleto dopo il cambiamento della sorgente. linkedSignal ricalcola il valore ogni volta che cambia la sorgente, consentendo comunque le scritture negli intervalli.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

La forma source/computation

La forma avanzata separa source da computation e consente di accedere al valore precedente, utile per conservare una selezione se esiste ancora.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

Conservare la scelta dell'utente

Il pattern del valore precedente conserva la selezione dell'utente se esiste ancora dopo l'aggiornamento dell'elenco; in caso contrario, ricorre a un valore predefinito: un ottimo dettaglio per la UX.

linkedSignal è scrivibile

A differenza di computed, su un linkedSignal è possibile chiamare .set() e .update(). Il valore impostato manualmente rimane valido finché la sorgente non cambia nuovamente.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

Pattern: menu a discesa dipendenti

Paese -> Città: quando cambia il Paese, reimposti la città sulla prima disponibile, consentendo però all'utente di sceglierne un'altra.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

Pattern: stato ottimistico dell'interfaccia

linkedSignal può contenere un valore ottimistico derivato dai dati del server, consentendo all'interfaccia di sovrascriverlo immediatamente e di sincronizzarsi nuovamente all'arrivo di dati aggiornati.

Combinare con gli effect

È possibile reagire ai cambiamenti di linkedSignal con un effect, ad esempio per rendere persistente la selezione corrente.

const selected = linkedSignal(() => options()[0]);

effect(() => {
  localStorage.setItem('selected', selected());
});

Quando NON usare linkedSignal

Se il valore derivato è esclusivamente di sola lettura, usi computed(). Se il valore non deve mai essere reimpostato da una sorgente, usi un semplice signal(). Scelga linkedSignal solo quando ha bisogno di entrambe le caratteristiche: scrivibilità e reimpostazione dalla sorgente.

Grafo reattivo avanzato

signal -> computed -> linkedSignal -> effect forma una pipeline reattiva completa: input grezzi, derivazioni pure, stato scrivibile e reimpostabile ed effetti collaterali, tutto senza subscription manuali.

Verifica rapida

Verifichi la propria comprensione di linkedSignal.

Riepilogo: linkedSignal e pattern avanzati

linkedSignal() fornisce uno stato scrivibile che viene reimpostato a partire da una sorgente.

Utilizzi la forma con sorgente/calcolo per conservare una selezione dell'utente.
È ideale per menu a discesa dipendenti e interfacce ottimistiche.
Utilizzi computed per dati di sola lettura e un signal semplice per lo stato che non deve essere reimpostato.

Ha completato il corso sui Signals.

Domande Frequenti

La lezione «linkedSignal e pattern avanzati» è gratuita?

Sì — il testo completo di «linkedSignal e pattern avanzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «linkedSignal e pattern avanzati»?

Coordini reattivamente i signal dipendenti. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «linkedSignal e pattern avanzati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy