如何在 Angular 中检测视图刷新？

Question

我有一个显示动态只读数据的组件。例如：

{{getText()}}

我注意到 Angular 一遍又一遍地调用 getText，即使看起来没有必要这样做，即没有数据发生变化。如何检测 Angular 何时触发视图刷新？

Answer 1

您可以使用

ngDoCheck

钩子来检测它。在变更检测周期中触发。

在每个周期，函数都会被调用并且函数会被评估。

如果想提高性能，可以启用ChangeDetectionStrategy.OnPush，这会减少变更检测周期的次数。

Angular OnPush 更改检测和组件设计 - 避免常见陷阱

---

更简单的解决方案是评估该函数并将其存储在以 HTML 形式显示的属性中，然后您可以在属性发生更改时重新运行该函数以更新该属性。

导出类 SomeComponent { @Input()conditionToUpdateText：字符串； 显示属性 = '';

ngOnInit() {
  this.getText();
}

getText() {
  this.displayProp = this.conditionToUpdateText === 'hello' ? 'world' : 'asdf';
}

ngOnChanges() {
    this.getText();
}

在上面的示例中，我们在

displayProp

钩子上设置

ngOnInit

的初始值（在初始化期间），然后由于数据依赖于输入，因此我们使用

ngOnChanges

钩子（当输入更改时）重新评估财产。 HTML 的用法是：

{{displayProp}}

虽然简单的函数在更改检测期间多次触发是可以的，但根据经验，请避免使用函数，因为如果您不小心在 HTML 绑定中使用了昂贵的数组操作（如

find

），它会被多次调用并导致丢弃在性能方面。