在 Angular 中拥抱 Zoneless：变化检测的新时代
- Linda Hamilton原创
- 2025-01-21 06:29:09495浏览
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 示例说明：
- 事件处理程序属性更新：单击按钮会更新计数器。 Zone.js 拦截、安排更改检测并更新 UI。
- 异步属性更新：间隔更新属性。 Zone.js 检测异步操作并更新 UI。
-
HTTP 数据（数组）： 通过 HTTP 获取的数据存储在数组中； Angular 的默认更改检测会更新视图。 但是，使用
ChangeDetectionStrategy.OnPush，直接数组突变可能不会更新视图，除非手动触发引用更改或更改检测。 -
HTTP 数据（异步管道）：
AsyncPipe简化可观察处理，自动订阅并触发更改检测。 - HTTP 数据（信号）： 角度信号（一项现代功能）直接通知相关读者，独立于 Zone.js 简化更新。
这些示例突出了 Zone.js 在变更检测中的作用，为 Angular 改进的无区域架构奠定了基础。
为什么选择Zoneless？
删除 Zone.js 具有显着的好处：
-
简化的变更检测：更少的
ExpressionChangedAfterItHasBeenCheckedError问题和与区域相关的复杂性。 - 减少开销：更轻的框架，提高性能。
- 改进的调试：更好的变更检测控制，更容易识别性能瓶颈。
配置无区域 Angular 应用程序
切换到无区需要更改配置：
-
启用无区变更检测： 在
app.config.ts中，添加：
providers: [ provideExperimentalZonelessChangeDetection() ]
删除provideZoneChangeDetection()（如果存在）。
- 删除 Zone.js 导入：
- 从您的申请文件中删除
import '*zone.js';。 - 在
angular.json中，从zone.js数组中删除polyfills：
"polyfills": []
- 卸载 Zone.js:
npm uninstall zone.js
在没有 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 现在支持创建无区域项目：
providers: [ provideExperimentalZonelessChangeDetection() ]
以上是在 Angular 中拥抱 Zoneless：变化检测的新时代的详细内容。更多信息请关注PHP中文网其他相关文章！