首页 > 解决方案 > Angular 8 生命周期钩子性能问题

问题描述

我正在开发一个 Angular 应用程序,该应用程序具有一系列具有相互依赖的值的输入字段 i:ea 很多字段值是早期组件字段值的百分比。

我有一个函数setPercentages()用于计算不同字段的值,在我的反应式表单元素上调用 patchValue({}) 并将值分配给字段组件。

我的麻烦是 setPercentages() 是从 ngAfterViewChecked() 生命周期挂钩中调用的。虽然它有效,但我很快开始注意到(1)任何具有分配值的组件都不再可编辑,(2)它似乎减慢了应用程序甚至我的计算机的速度,因为钩子总是在触发。

因此,在下图中,请注意控制台区域中的 ngAfterViewChecked 在不到一分钟的时间内触发了超过 4k 次。在右侧,存款值组件不断重置为从 ngAfterViewChecked 挂钩返回的计算值。

在此处输入图像描述

由于我对 Angular 有点陌生,我正在寻找有关如何最好地可靠地更新我的文本字段中的数字以响应相邻字段组件的更改的建议。虽然 ngAfterViewChecked 确实允许我这样做,但对性能的影响是极端的。

标签: angularangular8angular-lifecycle-hooks

解决方案


推荐阅读