在 Angular 中擁抱 Zoneless：變化檢測的新時代

Angular 18 於 2024 年 5 月 22 日發布，引入了一個實驗性的遊戲規則改變者：無區域 Angular 應用程式。 這消除了對 Zone.js 的依賴，提高了效能，減少了開銷，並簡化了偵錯。讓我們深入研究無區域應用程式、它們的優點以及如何嘗試此功能。

了解 Angular 的變更偵測（Pre-Zoneless）

更改偵測使 DOM 與元件資料保持同步。 以前，Angular 依賴 Zone.js。 透過以下方式觸發變更偵測：

• 使用者互動：按鈕點擊、文字輸入。
• 非同步操作： HTTP 請求、setTimeout、setInterval、Promise 解析。
• 手動觸發器： ApplicationRef.tick()、ChangeDetectorRef.detectChanges().

Zone.js 修補了瀏覽器 API，通知 Angular 啟動更改偵測。 雖然有效，但這增加了開銷，有時會導致ExpressionChangedAfterItHasBeenCheckedError。

變化檢測範例（Pre-Zoneless）

在無區域變更偵測之前，Zone.js 管理 UI 更新。這個 StackBlitz 範例說明：

1. 事件處理程序屬性更新：點選按鈕會更新計數器。 Zone.js 攔截、安排更改偵測並更新 UI。
2. 非同步屬性更新：間隔更新屬性。 Zone.js 偵測非同步操作並更新 UI。
3. HTTP 資料（陣列）： 透過 HTTP 取得的資料儲存在陣列中； Angular 的預設變更偵測會更新視圖。 但是，使用 ChangeDetectionStrategy.OnPush，直接數組突變可能不會更新視圖，除非手動觸發引用更改或更改檢測。
4. HTTP 資料（非同步管道）： AsyncPipe 簡化可觀察處理，自動訂閱並觸發變更偵測。
5. HTTP 資料（訊號）： 角度訊號（一項現代功能）直接通知相關讀者，獨立於 Zone.js 簡化更新。

這些範例突顯了 Zone.js 在變更偵測中的作用，為 Angular 改進的無區域架構奠定了基礎。

為什麼選擇Zoneless？

刪除 Zone.js 有顯著的好處：

• 簡化的變更檢測：更少的ExpressionChangedAfterItHasBeenCheckedError問題和與區域相關的複雜性。
• 減少開銷：更輕的框架，提高效能。
• 改進的調試：更好的變更偵測控制，更容易辨識效能瓶頸。

配置無區域 Angular 應用程式

切換到無區需要更改配置：

1. 啟用無區變更偵測： 在 app.config.ts 中，新增：

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

刪除provideZoneChangeDetection()（如果存在）。

2. 刪除 Zone.js 導入：

• 從您的申請文件中刪除import '*zone.js';。
• 在 angular.json 中，從 zone.js 陣列中刪除 polyfills：

<code class="language-json">"polyfills": []</code>

3. 卸載 Zone.js:

<code class="language-bash">npm uninstall zone.js</code>

在沒有 Zone.js 的情況下測試更改檢測

此範例示範了沒有 Zone.js 的變更偵測：

讓我們來分析每個場景：

場景 1：事件處理程序屬性更新

如預期工作。

場景 2：非同步屬性更新

需要this.changeDetectorRef.markForCheck();或使用訊號：

更正版本（有markForCheck）：

更正版本（含訊號）：

場景 3：HTTP 資料（陣列）

視圖不會自動更新：

更正版本（有markForCheck）：

優先使用async管道。

場景 4：HTTP 資料（非同步管道）

簡單；使用 async 管：

場景 5：HTTP 資料（訊號）

使用 toSignal() 將可觀察量轉換為訊號：

摘要：

• 事件處理程序： UI 無縫更新。
• 非同步操作：需要markForCheck()或訊號。
• HTTP（可觀察資料）： 使用 async 管道。
• 訊號：訊號變化時自動更新 UI。

Angular 19 更新（2025 年 11 月 19 日）

Angular 19 進一步完善了無區應用程式支援、改進了 API、新增了伺服器端渲染支援並增強了測試。 Angular CLI 現在支援建立無區域專案：

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

以上是在 Angular 中擁抱 Zoneless：變化檢測的新時代的詳細內容。更多資訊請關注PHP中文網其他相關文章！