为什么在使用 OnPush 策略时输入没有更改，模板也会重新呈现？

Question

目前正在尝试解决这个问题：

@Component({
selector: 'app-test',
template: `value: {{value|json}} <button (click)="setValue()">set</button>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent {
@Input() name!: string;
value = false;
setValue() {
timer(100)
.subscribe(() => this.value = true);
}
}

单击该按钮不会立即触发重新渲染，但再次单击它会导致视图更新。

从组件中删除changeDetection(或将其设置为ChangeDetectionStrategy.Default(也会导致视图在单击按钮后立即重新渲染。

在这一点上，真正让我感到困惑的是：

• 为什么在使用OnPush策略时甚至会重新渲染视图？据我所知，这个策略不应该只在@Input变化时重新渲染吗？
• 为什么在单击按钮两次后会重新渲染？

Answer 1

按钮单击会触发刷新，因为您正在订阅单击事件。组件中的事件处理程序还会触发更改检测以运行。

第一次它看起来不像刷新，因为您添加了延迟，并且组件刷新发生在值更改之前。

Answer 2

据我了解，即使在 OnPush 策略上，在 DOM 事件角度上也会运行更改检测周期。事实上，这是唯一在使用 OnPush 策略时触发更改检测周期的异步 API (DOM(。

我的猜测是，由于计时器，第二次单击时正在更改值。

这是关于该主题的精彩文章 角度推移变化检测策略综合指南