Angular 14中循环渲染的子组件为何在父数组更新时重新初始化？

问题原因 #

你直接修改数组元素值时，*ngFor默认的追踪策略会把变化后的元素判定为「新项」——因为字符串是值类型，值变化就会被识别成不同的项。这会触发Angular销毁原有子组件、重建新组件实例，所以子组件的ngOnInit会重复执行，输入框的searchValue也会被重置为初始的空值。

解决方案：使用trackBy函数 #

给*ngFor绑定trackBy函数，指定用索引（或其他稳定的唯一标识）来追踪列表项，而非依赖元素的值。这样即使元素值变化，Angular只会更新子组件的输入属性，不会销毁重建组件。

修改父组件代码 #

1. 在父组件TS中添加trackBy函数：

// parent Component ts file
students: string[] = ['student1', 'student2', 'student3', 'student4'];

updateName(value: string, index: number) {
  console.log(index);
  this.students[index] = value;
}

// 新增trackBy函数，用索引作为唯一标识
trackByIndex(index: number, item: string): number {
  return index;
}

2. 修改父组件模板，绑定trackBy：

<!-- template of Parent component -->
<app-search 
  *ngFor="let student of students; let i = index; trackBy: trackByIndex" 
  [student]="student"
  (changeName)="updateName($event, i)"
>
</app-search>

原理说明 #

trackBy函数返回的唯一标识（这里用索引），是Angular判断列表项是否为同一实例的依据。当数组元素值变化时，索引没有改变，Angular就会复用现有子组件，仅更新@Input()绑定的student属性，不会触发组件初始化钩子（ngOnInit），输入框的状态也会保留。

补充优化建议 #

直接修改数组元素的写法（this.students[index] = value），Angular的变更检测有时无法及时捕获数组变化（虽然你的案例中触发了，但并非推荐写法）。更规范的方式是创建数组新引用，确保变更检测精准触发：

updateName(value: string, index: number) {
  console.log(index);
  // 生成新数组，触发变更检测
  this.students = [...this.students.slice(0, index), value, ...this.students.slice(index + 1)];
}

搭配trackBy使用，运行效果会更稳定。

内容的提问来源于stack exchange，提问作者Alok Shaw