Angular修改父组件数组元素时为何重建子组件而非更新？

问题场景 #

父组件代码：

@Component({
    selector: 'parent-component',
    templateUrl: 'parent-component.html',
})
export class ParentComponent {
    items : SomeClass[] = [....]; // 已初始化的数组

    onSomeEvent() {
        this.items[1] = new SomeClass(..);
    }
}

父组件模板：

<tr *ngFor="let item of items">
  <child-component [item]="item"/>
</tr>

子组件代码：

@Component({
    selector: 'child-component',
    templateUrl: 'child-component.html',
})
export class ChildComponent implements OnChanges {

    @Input() item! : SomeClass;

    constructor() {
        console.log('Child#constructor');
    }

    ngOnChanges(changes : SimpleChanges) : void {
        for (const propName in changes) {
            const change : SimpleChange = changes[propName];    
            console.log('Child#ngOnChanges prop="' + propName + '" change=' + change);
        }
    }
}

调用ParentComponent#onSomeEvent()后，控制台输出显示子组件被重建（执行了constructor，且ngOnChanges的firstChange为true），而非原有组件触发ngOnChanges。

核心原因 #

Angular的*ngFor默认使用对象引用身份作为追踪数组项的依据：

• 当你执行this.items[1] = new SomeClass(..)时，数组本身的引用没有改变，但索引1对应的对象引用完全替换成了新的实例。
• *ngFor在变更检测时对比前后数组项，发现该位置的对象引用和之前不一致，就会判定这是一个“新项”，于是销毁原来绑定的子组件，创建新的子组件实例来绑定新对象。
• 新创建的组件自然会执行constructor，并触发首次ngOnChanges（firstChange=true），而非原有组件接收输入变更。

解决方案：使用trackBy自定义追踪逻辑 #

通过给*ngFor添加trackBy函数，指定用对象的唯一标识（比如ID）来追踪数组项，而非依赖对象引用。这样即使对象引用改变，只要唯一标识不变，*ngFor就会复用现有子组件，触发其ngOnChanges。

步骤1：在父组件中添加trackBy函数 #

假设SomeClass有唯一的id属性：

export class ParentComponent {
    items : SomeClass[] = [....];

    // 自定义追踪函数
    trackByItemId(index: number, item: SomeClass): number {
        return item.id; // 返回对象的唯一标识
    }

    onSomeEvent() {
        this.items[1] = new SomeClass(..); // 即使引用改变，只要id不变就会复用组件
    }
}

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

<tr *ngFor="let item of items; trackBy: trackByItemId">
  <child-component [item]="item"/>
</tr>

这样修改后，替换数组元素时，*ngFor会匹配到相同ID的项，复用原有子组件，并触发它的ngOnChanges，控制台会输出原有组件的变更日志，而不会重建组件。

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