Angular Academy · Aula

linkedSignal e padrões avançados

Coordene sinais dependentes de forma reativa.

linkedSignal e padrões avançados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O problema que linkedSignal resolve

Às vezes, você quer um estado gravável que também se redefina quando alguma origem mudar. Um sinal computado simples é somente leitura; um sinal simples não se redefine automaticamente. linkedSignal() preenche essa lacuna: estado gravável derivado de uma origem.

linkedSignal básico

Passe uma computação. O resultado é um sinal gravável que é recalculado quando sua origem muda, mas que também pode ser definido 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 que não usar apenas um sinal?

Um sinal simples inicializado uma vez manteria um valor desatualizado depois que a origem mudasse. linkedSignal deriva o valor novamente sempre que a origem muda, permitindo gravações nesse intervalo.

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

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

A forma com origem e computação

A forma avançada separa source de computation e dá acesso ao valor anterior — útil para preservar uma seleção caso ela ainda exista.

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

Preservando a escolha do usuário

O padrão de valor anterior mantém a seleção do usuário se ela ainda existir depois que a lista for atualizada; caso contrário, recorre a um padrão — um ótimo detalhe de experiência do usuário.

linkedSignal é gravável

Diferentemente de um sinal computado, você pode chamar .set() e .update() em um linkedSignal. O valor manual permanece até que a origem mude novamente.

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

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

Padrão: listas suspensas dependentes

País -> Cidade: quando o país muda, redefina a cidade para a primeira disponível, mas permita que o usuário escolha outra.

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

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

Padrão: estado otimista da interface

linkedSignal pode manter um valor otimista derivado de dados do servidor, permitindo que a interface o substitua imediatamente e volte a sincronizá-lo quando dados novos chegarem.

Combinando com efeitos

Você pode reagir a alterações de linkedSignal com um efeito, por exemplo, para persistir a seleção atual.

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

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

Quando NÃO usar linkedSignal

Se o valor derivado for somente para leitura, use computed(). Se o valor nunca precisar ser redefinido a partir de uma origem, use um signal() simples. Use linkedSignal somente quando precisar de ambos: ser gravável e poder ser redefinido pela origem.

Grafo reativo avançado

signal -> computed -> linkedSignal -> effect formam um pipeline reativo completo: entradas brutas, derivações puras, estado gravável e redefinível e efeitos colaterais — tudo sem inscrições manuais.

Verificação rápida

Teste sua compreensão sobre linkedSignal.

Recapitulação: linkedSignal e padrões avançados

linkedSignal() fornece um estado gravável que é redefinido a partir de uma fonte.

Use a forma de fonte/computação para preservar uma seleção do usuário.
É excelente para listas suspensas dependentes e interfaces otimistas.
Use computed para valores somente leitura e um sinal simples para estados que não são redefinidos.

Você concluiu o curso de Signals.

Perguntas Frequentes

A aula “linkedSignal e padrões avançados” é grátis?

Sim — o texto completo de “linkedSignal e padrões avançados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “linkedSignal e padrões avançados”?

Coordene sinais dependentes de forma reativa. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “linkedSignal e padrões avançados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy