角落鏈結訊號

在 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中文網其他相關文章！