在 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中文网其他相关文章！