为什么在Mat-Table header悬停时触发ChangeDetection(尽管使用OnPush)



我在使用OnPush的情况下,mat-table触发变更检测时出现性能问题。

下面是一个工作示例:https://stackblitz.com/edit/angular-bjouzc?file=src%2Fapp%2Fapp.component.ts

当鼠标悬停标题单元格时,您将看到随机数的变化。

为什么悬停在表头会触发父组件的更改检测?

这似乎是Angular Material的内部,并在header箭头动画(开始和结束)上触发。

在源代码中进一步检查,似乎动画钩子用于排序头:

https://github.com/angular/components/blob/master/src/material/sort/sort-header.html L33

这确实触发了元素上的变更检测,该元素被冒泡到父组件,以及它的所有父组件。

您可以尝试分离排序视图来禁用更改检测,但是这样做,您也将失去排序箭头动画(假设它可以分离它)。

最新更新