使用不可变数据时Angular组件Hover效果闪烁问题求助

兄弟，我太懂你这个问题了！之前我也碰到过类似的情况——用不可变方式更新数组后，列表项的hover样式突然闪一下，简直头疼。其实这不是Angular的bug，是*ngFor默认的跟踪策略导致的，咱们一步步来解决：

问题根源 #

Angular的*ngFor默认是通过对象引用来跟踪列表项的。当你用不可变方式更新（也就是创建新数组替换原数组里的单个对象）时，新对象的引用和旧对象不一样，Angular会认为这是一个全新的列表项，于是会销毁原来的列表项组件，再重新创建一个新的。组件重建的过程中，之前的hover状态会丢失，就出现了闪烁的现象。

解决方案：使用trackBy函数 #

我们可以给*ngFor指定一个trackBy函数，让Angular根据对象的唯一标识（比如id）来跟踪列表项，而不是依赖对象引用。这样只要唯一标识不变，即使对象属性更新、引用变化，Angular也不会销毁重建组件，只是更新组件的输入属性，hover状态就能保持住，自然就不会闪烁了。

步骤1：在列表组件中定义trackBy函数 #

假设你的每个对象都有一个唯一的id属性，在父组件（列表组件）里添加这个函数：

trackByItemId(index: number, item: any): number {
  return item.id; // 返回对象的唯一标识
}

如果你的对象没有id，也可以用其他稳定的唯一标识（比如结合多个属性生成一个唯一值），核心是要保证同一个项的标识始终不变。

步骤2：在模板中给*ngFor绑定trackBy #

修改列表组件的模板，把trackBy绑定到*ngFor上：

<app-list-item 
  *ngFor="let item of items; trackBy: trackByItemId" 
  [item]="item"
></app-list-item>

这样修改后，当你用不可变方式更新对象属性时，Angular会识别出这是同一个列表项，只会更新组件的item输入属性，不会重建组件，hover的CSS效果也就不会出现闪烁了。

内容的提问来源于stack exchange，提问作者Dominik Rabij