Angular：悬停在菜单上会触发 table 中的更改

Angular: hovering on menu triggers change in table

看到这个：https://stackblitz.com/edit/angular-ivy-ytwi1v
在这里，一旦我们打开菜单并将鼠标悬停在菜单选项上，就会触发 table 个单元格使用的函数调用。 Console logs on hovering few times
所以，我的问题是：

编辑：我添加了视觉更改以突出显示该问题。

您的问题是 Angular 变更检测。所有模板动作侦听器，如 click、hover 等 - 最后，调用 ApplicationRef.tick()。它在组件树中运行变更检测循环。

每个组件模板中的所有函数和 getter 将在每个组件模板中发生更改检测时再次调用。这就是当您将鼠标悬停在菜单项上时边框颜色会发生变化的原因。

解决方案是在元素接收后进行此边界计算，否则，您在每个更改检测周期都进行计算，这会降低您的应用程序性能。