首页 >web前端 >js教程 >角链接信号

角链接信号

DDD
DDD原创
2024-11-25 14:57:11328浏览

Angular  linkedSignal

Angular 19 中,linkedSignal 功能引入了一个与计算逻辑保持同步的反应变量。这是一个强大的补充,可以增强反应性并简化您的代码库。

linkedSignal 的工作原理

linkedSignal 的工作原理是从提供的计算函数中获取其值。其运作方式如下:

  1. 计算函数:您向linkedSignal提供一个函数,其结果将成为linkedSignal的值。
  2. 自动更新:只要计算的输入发生变化,linkedSignal 就会自动更新。
  3. 手动更新:您还可以手动更改 linkedSignal 的值。

用法示例

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

逐步:

  1. 初始值:
console.log(selectedOption()); // 'Ground'

selectedOption 以“Ground”开头,因为它链接到 ShippingOptions 中的第一项。

  1. 手动更新:
selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

您手动将 selectedOption 设置为“Sea”,这是数组中的第三个选项。

  1. 依赖项更改时自动更新:
shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

当shippingOptions改变时,linkedSignal会重新计算。现在,它反映了新的第一个选项:“电子邮件”。

这是使用 linkedSignal 和自定义计算函数的示例

假设您想要管理摄氏温度和华氏温度。 linkedSignal 可用于通过自定义函数将华氏度与摄氏度保持关联。

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)

为什么使用它?

保持状态同步:确保您的 linkedSignal 始终与其计算的最新状态相匹配。
方便:当linkedSignal的依赖项发生变化时,你不需要手动更新它——它会自动更新。
灵活:您仍然可以在需要时手动覆盖其值。

要点:

linkedSignal 将其值与某些逻辑联系起来,因此当逻辑发生变化时它会自动保持最新状态。这对于一个状态依赖于另一个状态的场景非常有用。

以上是角链接信号的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn