Angular2+中如何渲染ContentChildren QueryList中单个子元素内容

这问题我熟！咱们一步步来实现这个标签页组件，保证能完美渲染每个tab的内容～

第一步：定义子组件 MyTabComponent #

首先得把单个标签页的组件做好，它需要接收标题，还要能让父组件控制激活状态，同时把用户传入的内容投影进去。

MyTab组件的TS代码 #

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

@Component({
  selector: 'my-tab',
  templateUrl: './my-tab.component.html',
  styleUrls: ['./my-tab.component.css']
})
export class MyTabComponent {
  @Input() title!: string;
  // 标记当前tab是否激活
  isActive = false;
}

MyTab组件的HTML代码 #

用ng-content把用户在<my-tab>标签里写的内容投影进来，只有激活时才显示：

<div class="tab-content" *ngIf="isActive">
  <ng-content></ng-content>
</div>

第二步：实现父组件 MyTabsComponent #

父组件需要获取所有子tab实例、管理激活状态、渲染头部切换按钮，以及显示当前激活的tab内容。

MyTabs组件的TS代码 #

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { MyTabComponent } from './my-tab.component';

@Component({
  selector: 'my-tabs',
  templateUrl: './my-tabs.component.html',
  styleUrls: ['./my-tabs.component.css']
})
export class MyTabsComponent implements AfterContentInit {
  // 用ContentChildren获取所有MyTab组件实例
  @ContentChildren(MyTabComponent) tabs!: QueryList<MyTabComponent>;

  ngAfterContentInit(): void {
    // 初始化时激活第一个tab
    const firstTab = this.tabs.first;
    if (firstTab) {
      firstTab.isActive = true;
    }
  }

  // 切换tab的方法
  selectTab(selectedTab: MyTabComponent): void {
    // 先把所有tab设为非激活
    this.tabs.forEach(tab => tab.isActive = false);
    // 激活选中的tab
    selectedTab.isActive = true;
  }
}

MyTabs组件的HTML代码 #

渲染头部tab列表，点击触发切换，同时显示所有tab内容（每个tab自己根据isActive控制显示）：

<div class="tabs-container">
  <!-- 标签头部 -->
  <div class="header">
    <ul>
      <li 
        *ngFor="let tab of tabs; let i = index"
        [class.active]="tab.isActive"
        (click)="selectTab(tab)"
      >
        {{ tab.title }}
      </li>
    </ul>
  </div>

  <!-- 标签内容区域 -->
  <div class="tab-content-container">
    <ng-content></ng-content>
  </div>
</div>

第三步：样式美化（可选但推荐） #

给组件加些基础样式，让它更像正经的标签页：

/* my-tabs.component.css */
.tabs-container {
  border: 1px solid #eee;
  border-radius: 4px;
  width: 100%;
}

.header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: 1px solid #eee;
}

.header li {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.header li.active {
  border-bottom-color: #1677ff;
  color: #1677ff;
  font-weight: 500;
}

.tab-content-container {
  padding: 20px;
}

/* my-tab.component.css */
.tab-content {
  width: 100%;
}

第四步：使用组件 #

就像你给出的示例那样直接使用：

<my-tabs>
  <my-tab title="title1">some content 1</my-tab>
  <my-tab title="title2">some content 2</my-tab>
</my-tabs>

关键知识点说明 #

• @ContentChildren(MyTabComponent)：用来获取父组件内容投影里的所有MyTabComponent实例，返回的QueryList会自动监听子组件的添加/移除并更新列表。
• ngAfterContentInit：这个生命周期钩子会在内容投影初始化完成后触发，适合在这里做初始化激活tab的操作——这时候tabs已经有值了。
• 组件封装思想：每个MyTab自己控制显示状态，避免父组件需要单独处理内容渲染，逻辑更清晰。

这样一套下来，你的标签页组件就能完美工作啦，点击不同的头部标签，对应的内容就会切换显示～

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