Angular 16禁用Zone.js后Signal.update()无法更新视图，求解答

当你禁用Zone.js（ngZone: 'noop'）后，Angular失去了自动触发变更检测的能力——这就是Signal值更新但视图不刷新的核心原因。

背后的逻辑 #

Angular的Signal本身是响应式的，值的更新会被追踪，但视图同步需要变更检测周期来触发。默认情况下，Zone.js会自动捕获所有异步操作（包括点击事件、定时器、Promise回调等），并在操作完成后通知Angular执行变更检测，把Signal的最新值同步到DOM。

但当你禁用Zone.js后，点击按钮的回调执行完title.update()之后，Angular完全不知道发生了值变更，自然不会去更新视图。

解决方案：手动触发变更检测 #

在组件中注入ChangeDetectorRef，在Signal更新后手动触发变更检测即可：

修改后的app.component.ts代码：

import { Component, signal, ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <h1>{{ title() }}</h1>
        <button (click)="click()">Change</button>
    `,
})
export class AppComponent {
    title = signal('Hello');

    constructor(private cdr: ChangeDetectorRef) {}

    click(): void {
        this.title.update((value) => value + "!!");
        // 手动触发变更检测
        this.cdr.detectChanges();
    }
}

补充说明 #

如果你希望在多个Signal更新后统一触发变更检测，也可以使用markForCheck()，它会标记组件及其父组件需要在下一次变更检测周期中检查；而detectChanges()会立即执行当前组件及其子组件的变更检测，更适合这种单次操作后的即时更新场景。

内容的提问来源于stack exchange，提问作者kkleczek