Angular 連結訊號和資源 API

Angular 19 引入了兩個重要功能，旨在增強 Angular 應用程式中的反應式程式設計和資料管理：linkedSignal 函數和 Resource API。這些新增功能解決了狀態同步和非同步資料處理的現有挑戰，為開發人員提供了更精簡、更有效率的工具。

linkedSignal：增強的訊號管理

在先前的 Angular 版本中，管理依賴其他訊號的狀態通常需要複雜的解決方法。開發人員通常使用計算（）訊號來根據其他訊號導出值。然而，compute() 訊號是唯讀的，在需要可寫訊號時限制了靈活性，該訊號既可以依賴其他訊號又可以獨立更新。

linkedSignal 函數透過建立可寫入訊號來解決此問題，該訊號會根據來源訊號的變化自動更新其值。此功能簡化了訊號之間的同步，並有助於重置模式的實現，從而實現更可維護和可預測的狀態管理。

範例：

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

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

在此範例中，updatedSignal 將始終是 sourceSignal 值的五倍，並將隨著 sourceSignal 的變化自動調整。

解決現有挑戰：

在引入 linkedSignal 之前，開發人員在創建既依賴其他訊號又可寫入的訊號時面臨困難。這通常會導致程式碼結構複雜並增加出錯的可能性。透過提供一種簡單的方法來創建此類訊號，linkedSignal 增強了程式碼清晰度並減少了與狀態管理相關的錯誤的可能性。

資源 API：簡化資料載入

管理非同步資料加載，尤其是透過 HTTP 請求，在 Angular 應用程式中是一項複雜的任務。開發者需要手動處理資料獲取的各種狀態，包括載入、成功和錯誤狀態，這通常會導致程式碼冗長且容易出錯。

Angular 19 中的資源 API 提供了一種響應式方法來載入資源，特別是對於 HTTP GET 請求等讀取操作。它允許開發者定義一個載入器函數，非同步獲取資料並提供訊號來監控當前狀態並有效處理錯誤。

範例：

import { resource } from '@angular/core';

const productResource = resource({
  loader: async () => {
    const response = await fetch('https://api.example.com/products');
    return response.json();
  }
});

在此範例中，productResource 使用從指定 API 取得資料的載入器函數進行初始化。資源 API 管理載入狀態和任何潛在錯誤，簡化資料擷取過程。

資源 API 的主要功能：

• 狀態追蹤：狀態、錯誤和isLoading等訊號允許開發者監控資料載入過程的當前狀態，以便於更好的使用者回饋和錯誤處理。狀態訊號可以具有以下值：
  • 空閒（0）：資源處於初始狀態，尚未開始載入。
  • 錯誤(1)：載入過程中發生錯誤。
  • 正在載入(2)：資源目前正在載入資料。
  • 重新載入 (3)：資源正在重新載入數據，通常是在上次載入之後。
  • 已解決（4）：資源已成功載入資料。
  • 本地（5）：資源的資料已在本地更新，無需新載入。
• 本地更新：更新方法可以對載入的資料進行本地修改，而無需觸發新的載入過程，從而提供資料操作的靈活性。
• 請求管理：當依賴訊號改變時，資源 API 會自動重新啟動載入過程，並可以取消正在進行的請求以防止競爭條件，確保資料的一致性和完整性。

解決現有挑戰：

在 Resource API 之前，開發人員必須實作手動邏輯來處理資料擷取的各種狀態，導致複雜性增加並可能出現錯誤。 Resource API 抽象化了這些問題，提供了一種聲明性且簡潔的方式來管理非同步資料操作，從而減少樣板程式碼並提高應用程式可靠性。

結論

Angular 19 中 linkedSignal 和 Resource API 的引入代表了響應式程式設計和資料管理的重大進步。這些功能透過為開發人員提供更靈活、更有效率、更可維護的狀態同步和非同步資料處理工具來解決長期存在的挑戰。透過利用這些新功能，開發人員可以創建具有增強效能和使用者體驗的現代 Web 應用程式。

以上是Angular 連結訊號和資源 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！