主页 / coding / 问题 / 79231487
Accepted
Ya.
Asked: 2024-11-28 02:31:00 +0800 CST

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

  • 772

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

<div>{{getText()}}</div>

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

html

1 个回答

  1. Best Answer

    您可以使用钩子来检测它ngDoCheck。它在变化检测周期中触发。

    在每个循环中，该函数都会被调用并且被评估。

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

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

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

    导出类SomeComponent { @Input（）conditionToUpdateText：字符串；displayProp =''；

    ngOnInit() {
  this.getText();
}

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

ngOnChanges() {
    this.getText();
}

    displayProp在上面的例子中，我们在钩子上设置了的初始值ngOnInit（在初始化期间），然后由于数据依赖于输入，我们使用ngOnChanges钩子（当输入改变时）来重新评估该属性。HTML 用法将是：

    {{displayProp}}

    虽然在变化检测期间多次触发简单函数是可以的，但根据经验法则，请避免使用函数，因为如果您意外地使用了昂贵的数组操作（如find在 HTML 绑定中），它会被多次调用并导致性能下降。

    • 2

相关问题