Angular中如何实现*ngFor循环组件内按钮单选激活的动态样式修改

问题根因 #

你当前的实现将按钮的激活状态维护在每个独立的子按钮组件内部，不同按钮组件之间没有状态同步机制，因此点击其他按钮时，无法触发之前已激活按钮的状态更新，才会出现多个按钮同时显示激活样式的问题。

实现步骤 #

• 第一步：将激活状态的管理权收归父组件，父组件定义currentActiveId变量存储当前激活按钮的唯一标识，初始值可设为null。
• 第二步：父组件用*ngFor循环渲染按钮时，给每个子按钮传入两个输入属性：当前按钮的唯一ID、当前按钮是否激活的判断结果（即currentActiveId === 当前按钮ID），同时给子组件绑定状态变更的自定义事件。
  父组件模板示例：

  <!-- 父组件html -->
  <app-button 
    *ngFor="let btn of buttonList" 
    [itemId]="btn.id"
    [isActive]="currentActiveId === btn.id"
    (onActiveChange)="onBtnActiveChange($event)"
  >
    {{btn.label}}
  </app-button>
  

• 第三步：改造子按钮组件，删除内部维护的激活状态变量，改为接收父组件传入的输入属性，同时定义输出事件用于通知父组件更新状态。
  子组件逻辑示例：

  // 子组件ts
  import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.css']
  })
  export class ButtonComponent {
    @Input() itemId: number;
    @Input() isActive: boolean;
    @Output() onActiveChange = new EventEmitter<number>();
  
    handleBtnClick() {
      this.onActiveChange.emit(this.itemId);
    }
  }
  

  子组件模板示例：

  <!-- 子组件html -->
  <button 
    [class.active]="isActive"
    (click)="handleBtnClick()"
  >
    <ng-content></ng-content>
  </button>
  

• 第四步：父组件实现状态更新方法，点击按钮时更新currentActiveId，如果需要支持点击已激活按钮取消选中，可以加判断逻辑：

  // 父组件ts
  currentActiveId: number | null = null;
  
  onBtnActiveChange(clickedId: number) {
    // 单选模式，点击已激活按钮可取消选中
    this.currentActiveId = this.currentActiveId === clickedId ? null : clickedId;
    // 如果不需要取消选中，直接赋值即可：this.currentActiveId = clickedId
  }
  

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