angular-zoneless

用途

Angular Zoneless 面向使用 Angular 19+（2025）的开发者，用于从架构上移除 zone.js 依赖，改为采用无区域（Zoneless）变更检测。当项目需要启用无区域变更检测、使用 provideZonelessChangeDetection、或从 Angular 应用中移除 zone.js 时，可使用本技能。

主要能力

根据资料，本技能覆盖以下内容：

API 变更说明：记录版本相关的 API 变化，包括新增 provideZonelessChangeDetection（用于启用无区域模式）、afterNextRender（在渲染后运行代码，无需 zone.js）、afterRender（每次渲染后运行）、signal() 与 computed()（可在无 zone.js 下工作）。无区域模式自 Angular 17 起为实验性功能，在 Angular 19+ 稳定。
最佳实践：提供启用无区域变更检测、使用信号实现响应式、使用 afterNextRender 处理 DOM 操作、使用 afterRender 处理重复操作、在无 zone.js 下处理异步、在需要时手动使用 ChangeDetectorRef、从 polyfills 移除 zone.js、使用 untracked 进行非响应式读取、处理浏览器事件、以及在无区域模式下测试等示例代码。

使用方式

资料给出的配置与代码要点如下：

在应用配置中启用无区域变更检测：

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

使用信号进行响应式，并在组件上设置 OnPush 变更检测策略：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

使用 afterNextRender 进行 DOM 操作：

constructor() {
  afterNextRender(() => {
    // Runs after rendering, outside zone
    this.initChart();
  });
}

使用 afterRender 处理重复操作：

constructor() {
  afterRender(() => {
    // Runs after every render
  });
}

在无 zone.js 下处理异步：

@Component({
  template: `
    @if (data$ | async; as data) {
      {{ data.name }}
    }
  `
})
export class AsyncComponent {
  data$ = from(fetch('/api/data')).pipe(
    share()
  );
}

在需要时手动使用 ChangeDetectorRef：

constructor(private cdr: ChangeDetectorRef) {}

update() {
  this.value = newValue;
  this.cdr.markForCheck();
}

从 polyfills 中移除 zone.js：

// polyfills.ts
// Remove or comment out zone.js import
// import 'zone.js';

使用 untracked 进行非响应式读取：

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

ngOnInit() {
  // Read without creating dependency
  const value = untracked(() => this.signal());
}

处理浏览器事件：

@HostListener('click')
onClick() {
  // Works without zone.js
  this.count.update(c => c + 1);
}

在无区域模式下测试：

TestBed.configureTestingModule({
  providers: [
    provideZonelessChangeDetection()
  ]
});

适用场景

适用于需要在 Angular 应用中去掉 zone.js、改用信号驱动响应式与显式变更检测的工程场景；也适用于编写无区域模式下的单元测试配置。

限制

资料标注的版本要求为 Angular 19+（2025），并说明无区域模式在 Angular 17 为实验性、Angular 19+ 才稳定。其余关于性能收益、迁移成本、兼容范围与工具链支持等信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制

标签