Question

假设我在模板中的dom上附加了两个点击处理程序：

<div (click)="handleClick()">
  <p (click)="handleClick()">
    Start editing to see some magic happen :)
  </p>
</div>

，然后在ts文件中：

export class AppComponent implements DoCheck {
  handleClick(){
    console.log('AppComponent: handle click');
  }

  ngDoCheck(){
    console.log('AppComponent: ngDoCheck');
  }
}

现在，如果有人单击 p 元素，则在每次单击处理程序之后都会执行更改检测（执行两次ngDoCheck）。当我添加更多的处理程序时，变更检测阶段的数量会相应增加。

这里是示例： https://stackblitz.com/edit/angular-czdzzk

在这个简单的示例中，它是无害的，但是我目前正在开发一个更大的应用程序，该应用程序在页面上有数十个组件，并附加了多个处理程序（主要由外部库附加到window.document上）。在这种情况下，单击页面上的任意位置后，将对组件进行多次检查。

在所有处理程序执行之后，是否可以执行一次更改检测？还是出于某种原因以这种方式实现？

Answer 1

使用ChangeDetectionStrategy.onPush Angular docs。您应该始终使用onPush

@Component({
  selector: 'selector'
  changeDetection: ChangeDetectionStrategy.onPush,
  //...
})
export default MyComponent {
  //...
}

每个处理程序后都会触发角度变化检测吗？

1 个答案: