在 Angular 19 中,linkedSignal 功能引入了一个与计算逻辑保持同步的反应变量。这是一个强大的补充,可以增强反应性并简化您的代码库。
linkedSignal 的工作原理是从提供的计算函数中获取其值。其运作方式如下:
const shippingOptions = signal(['Ground', 'Air', 'Sea']); const selectedOption = linkedSignal(() => shippingOptions()[0]);
console.log(selectedOption()); // 'Ground'
selectedOption 以“Ground”开头,因为它链接到 ShippingOptions 中的第一项。
selectedOption.set(shippingOptions()[2]); console.log(selectedOption()); // 'Sea'
您手动将 selectedOption 设置为“Sea”,这是数组中的第三个选项。
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中文网其他相关文章!