首頁 > web前端 > js教程 > 角落鏈結訊號

角落鏈結訊號

DDD
發布: 2024-11-25 14:57:11
原創
285 人瀏覽過

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板