Angular Academy · Lección

linkedSignal y patrones avanzados

Coordine señales dependientes de forma reactiva.

linkedSignal y patrones avanzados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

El problema que resuelve linkedSignal

A veces necesita un estado modificable que también se restablezca cuando cambia alguna fuente. Una computed normal es de solo lectura; una señal normal no se restablece automáticamente. linkedSignal() conecta ambos conceptos: estado modificable derivado de una fuente.

linkedSignal básico

Pase una función de cálculo. El resultado es una señal modificable que se recalcula cuando cambia su fuente, pero que también puede establecerse 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'

¿Por qué no usar simplemente una señal?

Una señal normal inicializada una sola vez conservaría un valor obsoleto después de que cambiara la fuente. linkedSignal vuelve a derivar el valor cada vez que cambia la fuente y, al mismo tiempo, permite escrituras entre cambios.

// 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 avanzada separa source de computation y proporciona acceso al valor anterior, lo que resulta útil para conservar una selección si todavía existe.

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];
  }
});

Conservar la elección del usuario

El patrón del valor anterior conserva la selección del usuario si aún existe después de actualizarse la lista; de lo contrario, recurre a un valor predeterminado. Es un excelente detalle para la experiencia de usuario.

linkedSignal es modificable

A diferencia de computed, puede llamar a .set() y .update() en un linkedSignal. El valor manual se conserva hasta que la fuente vuelve a cambiar.

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

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

Patrón: menús desplegables dependientes

País -> Ciudad: cuando cambia el país, restablezca la ciudad a la primera disponible, pero permita que el usuario elija otra.

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

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

Patrón: estado optimista de la interfaz

linkedSignal puede contener un valor optimista derivado de los datos del servidor, al tiempo que permite que la interfaz lo sobrescriba inmediatamente y vuelva a sincronizarse cuando lleguen datos actualizados.

Combinar con efectos

Puede reaccionar a los cambios de linkedSignal con un efecto, por ejemplo, para conservar la selección actual.

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

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

Cuándo NO usar linkedSignal

Si el valor derivado es exclusivamente de solo lectura, use computed(). Si el valor nunca necesita restablecerse a partir de una fuente, use una signal() normal. Use linkedSignal solo cuando necesite ambas cosas: que el valor sea modificable y que pueda restablecerse desde una fuente.

Grafo reactivo avanzado

signal -> computed -> linkedSignal -> effect forma una canalización reactiva completa: entradas sin procesar, derivaciones puras, estado modificable y restablecible, y efectos secundarios, todo sin suscripciones manuales.

Comprobación rápida

Compruebe su comprensión de linkedSignal.

Resumen: linkedSignal y patrones avanzados

linkedSignal() le proporciona un estado escribible que se restablece a partir de una fuente.

Utilice la forma de fuente/cálculo para conservar una selección del usuario.
Es ideal para listas desplegables dependientes y UI optimista.
Utilice computed para valores de solo lectura y una señal simple para estados que no se restablecen.

Ha completado el curso de Signals.

Preguntas frecuentes

¿La lección «linkedSignal y patrones avanzados» es gratis?

Sí — el texto completo de «linkedSignal y patrones avanzados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «linkedSignal y patrones avanzados»?

Coordine señales dependientes de forma reactiva. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «linkedSignal y patrones avanzados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy