Angular中ngFor循环内如何修改组件属性实现标签切换仅单个激活？

核心思路：你当前将show状态存储在每个TabComponent内部，Angular组件默认状态隔离，兄弟组件无法直接互相访问属性，最符合最佳实践的实现方式是状态提升，将tab的激活状态交给父组件统一管理。

第一步：修改子组件TabComponent #

将原来内部维护的show属性改为输入属性，新增输出事件通知父组件点击行为：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

export class TabComponent implements OnInit {
  // 由父组件传入控制显隐
  @Input() show: Boolean = false;
  // 向父组件抛出点击事件
  @Output() tabClick = new EventEmitter<void>();

  toggle(event: any) {
    this.tabClick.emit();
  }
}

第二步：父组件新增激活状态管理逻辑 #

在父组件中存储当前激活的tab索引，统一控制所有tab的show状态：

// 父组件类代码
export class TabsParentComponent {
  // 你的原tab列表数据
  tabs = [];
  // 记录当前激活的tab索引，-1表示无激活项
  activeTabIndex: number = -1;

  onTabClick(index: number) {
    // 如果点击的是当前已激活的tab，则关闭；否则切换为当前点击的tab
    this.activeTabIndex = this.activeTabIndex === index ? -1 : index;
  }
}

第三步：修改父组件模板绑定 #

遍历tab时传入索引，关联激活状态：

<ng-container *ngFor="let tab of tabs; let tabIndex = index">
  <app-tab 
    [ngClass]="activeTabIndex === tabIndex ? 'open':'closed'"
    [show]="activeTabIndex === tabIndex"
    (tabClick)="onTabClick(tabIndex)"
  ></app-tab>
</ng-container>

可选实现（不推荐）：通过ViewChildren直接操作子组件实例 #

如果你不想调整现有结构，也可以在父组件中获取所有子组件实例，点击时批量修改状态：

// 父组件代码
import { ViewChildren, QueryList } from '@angular/core';
import { TabComponent } from './tab.component';

export class TabsParentComponent {
  @ViewChildren(TabComponent) tabList: QueryList<TabComponent>;

  onTabClick(currentIndex: number) {
    // 遍历所有tab，先全部设为false
    this.tabList.forEach((tab, index) => {
      tab.show = index === currentIndex ? !tab.show : false;
    })
  }
}

该方案不符合Angular单向数据流设计原则，状态分散在父子组件中，后续维护成本更高，仅做临时方案参考。

内容的提问来源于stack exchange，提问作者Ricardo Castañeda