Angular 6：如何用@ContentChildren和@HostBinding程序化切换Tab组件显隐？

看起来你已经搭好了Tab组件的基础结构，但遇到了两个核心问题：一是初始设置isHidden后内容仍可见，二是还没实现点击切换的逻辑。我来一步步帮你解决：

1. 先修复代码里的语法错误 #

你的TabContainerComponent的ngAfterContentInit方法里有语法问题，循环的回调函数闭合不对，而且push的括号也写错了。先修正这部分：

export class TabContainerComponent {
  @ContentChildren(TabItemComponent) items!: QueryList<TabItemComponent>;
  tabItems: string[] = [];
  currentTabIndex = 0; // 新增：记录当前激活的tab索引

  ngAfterContentInit() {
    // 先收集所有tab标题
    this.tabItems = this.items.map(item => item.caption);
    
    // 初始化：默认显示第一个tab，隐藏其他
    this.items.forEach((item, idx) => {
      item.isHidden = idx !== this.currentTabIndex;
    });
  }
}

2. 实现点击切换的逻辑 #

给Tab标题添加点击事件，触发切换逻辑，更新对应TabItem的isHidden状态：

首先在TabContainerComponent里添加切换方法：

onTabClick(index: number) {
  this.currentTabIndex = index;
  // 遍历所有tabItem，只显示当前选中的
  this.items.forEach((item, idx) => {
    item.isHidden = idx !== index;
  });
}

然后修改TabContainerComponent的模板，绑定点击事件并传递索引：

<div class="tab-title" 
     *ngFor="let caption of tabItems; let i = index"
     (click)="onTabClick(i)"
     [class.active]="i === currentTabIndex"> <!-- 可选：添加激活样式 -->
  {{caption}}
</div>
<ng-content></ng-content>

3. 确保可见性控制生效（关键！） #

原生的hidden属性有时候会被CSS的display样式覆盖，导致设置了hidden=true但内容仍显示。更可靠的方式是用CSS类来控制可见性：

修改TabItemComponent，把@HostBinding('hidden')换成CSS类绑定：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-tab-item',
  template: '<ng-content></ng-content>',
  styles: [`
    .tab-hidden {
      display: none;
    }
  `]
})
export class TabItemComponent {
  @HostBinding('class.tab-hidden') isHidden = false; // 用CSS类控制隐藏
  @Input() caption!: string;
}

这样就能确保切换时内容会被正确隐藏/显示了。

4. 可选：添加激活标题的样式 #

为了提升用户体验，给当前激活的tab标题加个样式，比如在TabContainerComponent的样式里：

.tab-title {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #eee;
  border-bottom: none;
  margin-right: 4px;
}

.tab-title.active {
  background-color: #f5f5f5;
  font-weight: bold;
}

为什么之前的hidden不生效？ #

原生HTML的hidden属性的优先级低于CSS的display属性，如果你的app-tab-item组件或者父组件的CSS里设置了display: block之类的样式，就会覆盖hidden的效果。用自定义CSS类来控制display: none是更稳定的方案。

现在你的Tab组件应该可以正常点击切换，并且内容能正确显示/隐藏了，同时也支持动态数量的app-tab-item。

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