如何在Angular Material中通过代码向标签组添加标签？

核心思路是让父组件传递标签配置数组（包含标签标题、对应内容模板），子组件通过*ngFor循环生成mat-tab，并利用ngTemplateOutlet渲染父组件定义的内容模板。该方案既支持动态增删标签，又能让父组件完全控制每个标签的内容逻辑。

实现步骤 #

1. 定义标签配置接口：统一标签的标题、内容模板格式
2. 子组件接收配置数组，循环生成mat-tab并插入父组件模板
3. 父组件定义各标签的内容模板，组装配置数组传递给子组件
4. 支持动态更新：父组件修改配置数组，子组件自动同步标签列表

代码示例 #

子组件（tab-container.component.ts） #

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

// 标签配置接口
export interface TabConfig {
  label: string;
  contentTemplate: TemplateRef<any>;
}

@Component({
  selector: 'app-tab-container',
  template: `
    <mat-tab-group>
      <mat-tab 
        *ngFor="let tab of tabs; let i = index" 
        [label]="tab.label"
      >
        <!-- 渲染父组件传入的内容模板 -->
        <ng-container [ngTemplateOutlet]="tab.contentTemplate"></ng-container>
      </mat-tab>
    </mat-tab-group>
  `
})
export class TabContainerComponent {
  @Input() tabs: TabConfig[] = [];
}

父组件（parent.component.ts） #

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { TabConfig } from './tab-container.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-tab-container [tabs]="tabConfigs"></app-tab-container>

    <!-- 定义各标签的内容模板 -->
    <ng-template #tab1Content>
      <p>标签1的自定义内容，可调用父组件方法</p>
      <button (click)="handleTabClick()">点击测试</button>
    </ng-template>

    <ng-template #tab2Content>
      <div class="custom-tab-style">
        <h3>标签2的复杂内容</h3>
        <p>支持Angular所有模板语法，如*ngFor、插值表达式</p>
      </div>
    </ng-template>

    <!-- 动态添加标签按钮 -->
    <button (click)="addNewTab()">添加新标签</button>
  `
})
export class ParentComponent {
  @ViewChild('tab1Content') tab1Content!: TemplateRef<any>;
  @ViewChild('tab2Content') tab2Content!: TemplateRef<any>;

  tabConfigs: TabConfig[] = [];

  ngAfterViewInit() {
    // 初始化标签配置
    this.tabConfigs = [
      { label: '标签1', contentTemplate: this.tab1Content },
      { label: '标签2', contentTemplate: this.tab2Content }
    ];
  }

  addNewTab() {
    // 动态生成新标签配置
    const newLabel = `新标签 ${this.tabConfigs.length + 1}`;
    // 可复用已有模板或动态创建新模板，这里简化示例复用tab1模板
    this.tabConfigs.push({ label: newLabel, contentTemplate: this.tab1Content });
  }

  handleTabClick() {
    alert('父组件方法被触发');
  }
}

方案优势 #

• 完全支持动态增删：修改父组件tabConfigs数组，子组件自动更新标签列表
• 父组件完全掌控内容：标签内容可使用父组件的变量、方法，支持所有Angular模板特性
• 规避原生API限制：无需操作MatTabGroup内部未开放的修改方法，避免兼容性问题
• 无标签数量限制：不再局限于固定数量的标签，支持任意规模的动态标签

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