我在使用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
这确实触发了元素上的变更检测,该元素被冒泡到父组件,以及它的所有父组件。
您可以尝试分离排序视图来禁用更改检测,但是这样做,您也将失去排序箭头动画(假设它可以分离它)。