angular-zoneless

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Zoneless

Version: Angular 19+ (2025) Tags: Zoneless, Change Detection, Signals, Reactivity

References: Zoneless Guide • Signals

版本： Angular 19+ (2025) 标签： Zoneless、变更检测、Signals、响应式

参考资料： Zoneless指南 • Signals

API Changes

API变更

This section documents recent version-specific API changes.

NEW: provideZonelessChangeDetection — Enable zoneless mode source
NEW: afterNextRender — Run code after rendering without zone.js
NEW: Experimental Zoneless — Available since Angular 17, stable in Angular 19+
NEW: signal() + computed() — Works without zone.js

本部分记录了近期各版本对应的API变动：

新增：provideZonelessChangeDetection — 启用无zone模式来源
新增：afterNextRender — 无需zone.js即可在渲染结束后运行代码
新增：实验性无zone模式 — 自Angular 17起提供，Angular 19+版本正式稳定
新增：signal() + computed() — 无需依赖zone.js即可正常工作

Best Practices

最佳实践

Enable zoneless change detection

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

Use signals for reactivity

@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);
  }
}

Use afterNextRender for DOM operations

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

Use afterRender for repeated operations

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

Handle async without zone.js

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

Use ChangeDetectorRef manually when needed

constructor(private cdr: ChangeDetectorRef) {}

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

Remove zone.js from polyfills

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

Use untracked for non-reactive reads

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

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

Handle browser events

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

Test in zoneless mode

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

启用无zone变更检测

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

使用Signals实现响应式

@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);
  }
}

对DOM操作使用afterNextRender

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);
}

在无zone模式下测试

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