mat-menu 冷冻（角材料）

Question

我在其他一些component 中有一个mat-menu（来自角材料）。在选择mat-menu 中的选项时，我将选定的值发送给其他component，而接收发出值的component 将该值绑定到pipe 的参数。 pipe 方法使用了 lodash 的深拷贝。 mat-menu 正在冻结，当我在菜单内的选项之间切换时，UI 会变慢。我也尝试过JSON.parse(JSON.stringify()) 进行深拷贝。我的数据是嵌套的（四个级别）。缓慢的原因是什么？

Answer 1

Angular Material Mat-Menu 触发多重变化检测。即使在悬停变化检测被触发。当您执行四次多级链接时。您正在使用四个*ngFor，它正在创建级联更改检测。

您可以通过添加trackBy 来验证。

临时解决方案是将每个组件划分为不同的组件并使用 OnPush Changedetection 策略。

永久解决方案是修复角材料mat-menu 组件中的变化检测。

使用 TrackBy 和 onPush ChangeDetection 您将获得一些性能提升。