Signal lié angulaire

Dans Angular 19, la fonctionnalité linkedSignal introduit une variable réactive qui reste synchronisée avec la logique calculée. Il s'agit d'un ajout puissant qui améliore la réactivité et simplifie votre base de code.

Comment fonctionne linkedSignal

Le linkedSignal fonctionne en dérivant sa valeur d'une fonction de calcul fournie. Voici comment cela fonctionne :

1. Fonction de calcul : vous fournissez une fonction à linkedSignal, et son résultat devient la valeur de linkedSignal.
2. Mises à jour automatiques : Le linkedSignal se met automatiquement à jour chaque fois que les entrées du calcul changent.
3. Mises à jour manuelles : vous pouvez également modifier manuellement la valeur d'un signal lié.

---

Exemple d'utilisation

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);

Étape par étape :

1. Valeur initiale :

console.log(selectedOption()); // 'Ground'

selectedOption commence par « Ground » car il renvoie au premier article dans shippingOptions.

1. Mise à jour manuelle :

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

Vous définissez manuellement selectedOption sur « Sea », qui est la troisième option du tableau.

1. Mise à jour automatique sur le changement de dépendance :

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

Lorsque shippingOptions change, le linkedSignal recalcule. Désormais, il reflète la nouvelle première option : « E-mail ».

Voici un exemple d'utilisation d'un linkedSignal avec une fonction de calcul personnalisée
≈
Supposons que vous souhaitiez gérer la température en degrés Celsius et Fahrenheit. Un linkedSignal peut être utilisé pour maintenir Fahrenheit lié à Celsius via une fonction personnalisée.

const celsius = signal(25); // Base signal for temperature in Celsius
const fahrenheit = linkedSignal(() => celsius() * 9/5 + 32); // Compute Fahrenheit from Celsius
console.log(fahrenheit()); // 77 (25°C in Fahrenheit)
// Change the Celsius value
celsius.set(30);
console.log(fahrenheit()); // 86 (30°C in Fahrenheit)
// Manually update Fahrenheit (breaks auto-link temporarily)
fahrenheit.set(100);
console.log(fahrenheit()); // 100
console.log(celsius()); // Still 30, as Fahrenheit is overridden
// Change Celsius again to reset linkage
celsius.set(0);
console.log(fahrenheit()); // 32 (0°C in Fahrenheit)

Pourquoi l'utiliser ?

Garde l'état synchronisé : garantit que votre signal lié correspond toujours au dernier état de son calcul.
Pratique : vous n'avez pas besoin de mettre à jour manuellement le linkedSignal lorsque ses dépendances changent : il se met à jour automatiquement.
Flexible : vous pouvez toujours remplacer manuellement sa valeur en cas de besoin.

À retenir :

Un linkedSignal lie sa valeur à une certaine logique, de sorte qu'il reste automatiquement à jour lorsque la logique change. C’est idéal pour les scénarios où un état dépend d’un autre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!