Angular实现点击触发动态添加带组件内容的选中标签页问题咨询

你当前的写法有两个核心问题：

• Angular默认的模板插值语法{{ }}只会把变量内容转义为纯文本输出，不会解析HTML标签
• 就算改用[innerHTML]绑定内容，也只能渲染原生HTML元素，无法识别<app-content1>这类Angular自定义组件标签，也无法触发组件的生命周期逻辑

用Angular官方提供的ngComponentOutlet指令实现动态组件渲染，是成本最低的实现方式，无需手动操作DOM或者编写复杂的组件工厂逻辑。 #

步骤1：调整TS代码逻辑 #

修改tabs数组的存储结构，存储组件类而非字符串，同时补充自动选中新标签页的逻辑：

import { ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';
// 导入你要动态渲染的组件
import { AppContent1Component } from './content1.component';
import { AppContent2Component } from './content2.component';

interface TabItem {
  caption: string;
  component: any;
  // 可选：如果需要给组件传参可以加params字段
  params?: Record<string, any>;
}

export class TesttabsComponent implements OnInit {
  @ViewChild('tabgroup') tabGroup!: MatTabGroup;
  // 导出组件类给模板调用
  AppContent1Component = AppContent1Component;
  AppContent2Component = AppContent2Component;

  tabs: TabItem[] = [
    { caption: 'First', component: FirstContentComponent },
    { caption: 'Second', component: SecondContentComponent }
  ];

  constructor() { }

  ngOnInit(): void {
  }

  addTab(caption: string, component: any, params?: Record<string, any>) {
    this.tabs.push({ caption, component, params });
    // 等待一轮变更检测后自动选中新标签页
    setTimeout(() => {
      // 如果你保留了模板里的空白mat-tab，赋值为this.tabs.length即可
      // 如果删掉了空白mat-tab，赋值为this.tabs.length - 1
      this.tabGroup.selectedIndex = this.tabs.length;
    })
  }
}

步骤2：修改HTML模板 #

用ngComponentOutlet替换原来的文本插值，动态渲染组件：

<!-- 按钮传组件类而非字符串 -->
<button mat-raised-button  (click)="addTab('Content 1', AppContent1Component)">
  Add content1
</button>
<button mat-raised-button  (click)="addTab('Content 2', AppContent2Component)">
  Add content2
</button>

<mat-tab-group #tabgroup>
  <!-- 不需要初始空白标签的话可以删掉下面这行 -->
  <mat-tab #blankTab></mat-tab>

  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.caption">
    <!-- 动态渲染组件 -->
    <ng-container *ngComponentOutlet="tab.component; inputs: tab.params"></ng-container>
  </mat-tab>
</mat-tab-group>

步骤3：模块配置补充 #

如果你用的是Angular14以下的非standalone版本，需要把所有要动态渲染的组件（比如AppContent1Component）添加到对应模块的declarations数组中；如果是standalone组件，直接在当前组件的imports数组里导入即可正常使用。

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