Angular Academy · Leçon

linkedSignal et modèles avancés

Coordonnez de manière réactive des signaux dépendants.

linkedSignal et modèles avancés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Le problème résolu par linkedSignal

Vous pouvez parfois vouloir un état modifiable qui se réinitialise également lorsqu’une source change. Un computed classique est en lecture seule ; un signal classique ne se réinitialise pas automatiquement. linkedSignal() fait le lien : il fournit un état modifiable dérivé d’une source.

linkedSignal de base

Passez un calcul. Le résultat est un signal modifiable qui se recalcule lorsque sa source change, mais qui peut aussi être défini manuellement.

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'

Pourquoi ne pas utiliser simplement un signal ?

Un signal classique initialisé une seule fois conserverait une valeur obsolète après la modification de la source. linkedSignal recalcule la valeur chaque fois que la source change, tout en autorisant les écritures entre-temps.

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

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

La forme source/calcul

La forme avancée sépare source de computation et donne accès à la valeur précédente — ce qui est utile pour conserver une sélection si elle existe toujours.

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

Conserver le choix de l’utilisateur

Le modèle fondé sur la valeur précédente conserve la sélection de l’utilisateur si elle existe encore après la mise à jour de la liste ; sinon, il revient à une valeur par défaut — une amélioration appréciable de l’expérience utilisateur.

linkedSignal est modifiable

Contrairement à computed, vous pouvez appeler .set() et .update() sur un linkedSignal. La valeur définie manuellement est conservée jusqu’à la prochaine modification de la source.

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

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

Modèle : listes déroulantes dépendantes

Pays -> Ville : lorsque le pays change, réinitialisez la ville avec la première ville disponible, tout en permettant à l’utilisateur d’en choisir une autre.

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

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

Modèle : état optimiste de l’interface

linkedSignal peut contenir une valeur optimiste dérivée des données du serveur, tout en permettant à l’interface de la remplacer immédiatement et de se resynchroniser lorsque de nouvelles données arrivent.

Combiner avec des effets

Vous pouvez réagir aux modifications d’un linkedSignal avec un effet, par exemple pour conserver la sélection actuelle.

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

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

Quand ne pas utiliser linkedSignal

Si la valeur dérivée est uniquement en lecture, utilisez computed(). Si la valeur ne doit jamais être réinitialisée à partir d’une source, utilisez un signal() classique. Utilisez linkedSignal uniquement lorsque vous avez besoin à la fois d’un état modifiable et réinitialisable depuis une source.

Graphe réactif avancé

signal -> computed -> linkedSignal -> effect forme un pipeline réactif complet : entrées brutes, dérivations pures, état modifiable et réinitialisable, et effets secondaires — le tout sans abonnements manuels.

Vérification rapide

Testez votre compréhension de linkedSignal.

Récapitulatif : linkedSignal et modèles avancés

linkedSignal() vous donne un état modifiable qui se réinitialise à partir d’une source.

Utilisez la forme source/calcul pour conserver une sélection effectuée par l’utilisateur.
Très pratique pour les listes déroulantes dépendantes et l’interface utilisateur optimiste.
Utilisez computed pour un état en lecture seule, et un signal classique pour un état qui ne se réinitialise pas.

Vous avez terminé le cours sur les signaux.

Questions Fréquemment Posées

La leçon « linkedSignal et modèles avancés » est-elle gratuite ?

Oui — le texte complet de « linkedSignal et modèles avancés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « linkedSignal et modèles avancés » ?

Coordonnez de manière réactive des signaux dépendants. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « linkedSignal et modèles avancés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy