Angular - linkedSignal 簡介

Angular 19 即將面世，它帶來了許多令人興奮的新功能。最值得注意的新增內容之一是 linkedSignal 原語，它有望徹底改變我們在 Angular 應用程式中處理反應式程式設計的方式。

重置模式的問題

傳統上，在 Angular 中實現重置模式涉及使用計算（）訊號。這種方法雖然有效，但也有其限制。當您需要明確設定訊號的值時，它會變成唯讀訊號，從而阻礙靈活性。

linkedSignal 解決方案

linkedSignal 透過提供一個可寫訊號來解決此限制，該訊號根據來源訊號的變更自動更新其值。這使我們能夠在兩者之間創建無縫同步，確保無故障的用戶體驗。

了解 linkedSignal

雖然 linkedSignal 會有多個重載，但其中兩個值得一提：

• linkedSignal 及其來源與計算

此重載可讓您建立一個 linkedSignal，它根據來源訊號的值計算其值。這是一個例子：

import { signal, linkedSignal } from '@angular/core';

  const sourceSignal = signal(0);
  const linkedSignal = linkedSignal({
    source: this.sourceSignal,
    computation: () => this.sourceSignal() * 5,
  });

在此範例中，linkedSignal 將始終是 sourceSignal 值的兩倍。每當sourceSignal改變時，linkedSignal就會自動重新計算它的值。這是 linkedSignal 的一個更真實的例子：

CourseDetailComponent 元件接受 courseId 作為輸入並顯示註冊學生的數量。我們的目標是在選定的 courseId 發生變化時重置學生計數。這就需要一個同步兩個訊號的機制：courseId 和studentCount。

雖然使用compute()可以有效地從其他訊號導出值，但它們是唯讀的。為了根據 courseId 的變化動態更新 StudentCount，我們利用 linkedSignal 原語。透過建立連結到 courseId 的可寫訊號，我們可以明確地設定 StudentCount 並在 courseId 更改時自動更新它。這種方法為管理訊號依賴性和確保資料一致性提供了強大且靈活的解決方案。

• linkedSignal 簡寫

對於更簡單的場景，您可以使用簡寫語法來建立 linkedSignal：

const sourceSignal = signal(10);
const linkedSignal = linkedSignal(() => sourceSignal() * 2);

這個簡寫文法相當於第一個重載，但它更簡潔，更容易閱讀。

LinkedSignals 的主要優點

• 簡化的重置模式：輕鬆實現重置模式，無需計算（）訊號的複雜度。
• 增強靈活性： 保持明確設定訊號值的能力，同時確保自動更新。
• 改進的效能：在背景進行最佳化以實現高效更新。
• 更簡潔的程式碼：更簡潔可讀的程式碼，特別是對於複雜的反應場景。

結論

linkedSignal 是 Angular 反應式工具包中一個強大的新工具。透過了解其核心概念和使用模式，您可以創建更強大、響應更快且用戶友好的 Angular 應用程式。憑藉將計算訊號和可寫入訊號的優點結合起來的能力，linkedSignal 有望成為 Angular 開發人員不可或缺的工具。您可以從此 stackblitz 了解有關 linkedSignals 的更多資訊。

以上是Angular - linkedSignal 簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！