Angular中@for循环使用组件时点击按钮引发多组件状态异常

问题描述 #

在Angular中使用@for列表渲染app-slider组件时，点击第二个按钮会同时将第2个和第3个按钮的状态设为true；但直接使用原生<button>时功能正常——仅第二个按钮的状态变为true，第三个仍为false。

核心原因 #

1. track $index导致组件实例错误复用 #

当切换todo的done状态后，undoneTodos数组的元素会发生变化（比如点击id=2的todo后，它会从undoneTodos移到doneTodos，此时undoneTodos变为[id=1, id=3]）。由于使用track $index作为跟踪标识，Angular会基于数组索引来复用组件实例：原来索引1的组件（对应id=2）会被复用给新数组的索引1元素（id=3），而非销毁重建。

2. 自定义组件内部状态未同步输入属性 #

SliderComponent内部维护了active属性的状态，点击时会将其设为true。但当Angular复用该组件实例并传入新的todo.done（此时id=3的done为false）时，Angular的单向输入绑定不会自动覆盖组件内部已修改的active值，导致组件显示的还是之前的true状态。

而原生<button>没有这个问题，因为它直接绑定todo.done，数组变化后@for会重新渲染按钮内容，直接显示最新的todo.done值，不存在组件实例复用和内部状态不一致的问题。

解决方案 #

方案1：使用唯一标识作为track值（推荐） #

将track $index替换为基于todo唯一标识的track todo.id，让Angular根据todo的唯一ID跟踪组件，避免数组元素变化时错误复用组件实例：

修改app.component.ts中的模板代码：

undone:
@for (todo of undoneTodos; track todo.id) {
  <app-slider [id]="'undone-'+$index" [active]="todo.done" (activeChange)="toggle(todo)"></app-slider>
}

done:
@for (todo of doneTodos; track todo.id) {
  <app-slider [id]="'done-'+$index" [active]="todo.done" (activeChange)="toggle(todo)"></app-slider>
}

方案2：同步输入属性变更到组件内部状态 #

如果必须使用track $index，可以在SliderComponent中监听active输入属性的变化，同步更新内部状态：

修改slider.component.ts：

import { Component, EventEmitter, Input, Output, OnChanges, SimpleChanges } from "@angular/core";

@Component({
  selector: 'app-slider',
  standalone: true,
  template: '<button (click)="onClick($event)">{{ active }}</button>',
})
export class SliderComponent implements OnChanges {
  @Input() active: boolean = false;
  @Output() activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['active']) {
      this.active = changes['active'].currentValue;
    }
  }

  onClick(event: Event) {
    event.stopImmediatePropagation();
    
    this.active = !this.active;
    this.activeChange.emit(this.active);
  }
}

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