如何在Angular 2/4中通过组件选择器编程添加带组件的Material标签页

没问题，我来一步步教你实现这个需求！咱们可以通过Angular的动态组件加载能力，结合Material Tabs来完成这个功能。

第一步：定义标签页的数据结构 #

首先，咱们需要一个数组来存储标签页的信息，除了组件名称，最好加上标题和唯一ID（避免重复）：

interface TabItem {
  id: number;
  title: string;
  componentName: string;
}

tabList: TabItem[] = [];
// 组件名称到组件类的映射，需要提前导入你的自定义组件
componentMap: {[key: string]: Type<any>} = {
  'customcomponent1': CustomComponent1,
  'customcomponent2': CustomComponent2
};

第二步：编写模板代码 #

在你的组件模板里，用mat-tab-group配合*ngFor渲染动态标签，同时用ng-template和ViewContainerRef来承载动态组件：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabList" [label]="tab.title">
    <ng-template #tabContent></ng-template>
  </mat-tab>
</mat-tab-group>

<button mat-raised-button color="primary" (click)="addTab('customcomponent1')">添加组件1标签</button>
<button mat-raised-button color="accent" (click)="addTab('customcomponent2')">添加组件2标签</button>

第三步：实现动态添加和组件加载逻辑 #

在组件类里，咱们需要注入ComponentFactoryResolver，然后编写添加标签和加载组件的方法：

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, Type, QueryList, ViewChildren } from '@angular/core';
import { CustomComponent1 } from './custom-component1/custom-component1.component';
import { CustomComponent2 } from './custom-component2/custom-component2.component';

// ... 其他组件基础代码 ...

constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

// 获取每个标签里的容器引用，用于加载动态组件
@ViewChildren('tabContent', { read: ViewContainerRef }) tabContainers!: QueryList<ViewContainerRef>;

ngAfterViewInit() {
  // 初始化时如果有默认标签，先加载对应组件
  this.tabList.forEach((tab, index) => {
    this.loadComponent(tab.componentName, index);
  });
}

addTab(componentName: string) {
  const newTab: TabItem = {
    id: Date.now(), // 用时间戳做唯一标识
    title: `Tab${this.tabList.length + 1}`,
    componentName: componentName
  };
  this.tabList.push(newTab);
  
  // 延迟一下，等视图更新后再加载组件
  setTimeout(() => {
    this.loadComponent(componentName, this.tabList.length - 1);
  });
}

loadComponent(componentName: string, index: number) {
  const container = this.tabContainers.toArray()[index];
  container.clear(); // 先清空容器避免重复加载
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentMap[componentName]);
  container.createComponent(componentFactory);
}

第四步：模块配置 #

别忘了在你的模块里声明并注册这些自定义组件，Angular 9+版本因为有Ivy编译器，不需要额外配置entryComponents，但低版本需要加上：

@NgModule({
  declarations: [
    // ... 你的其他组件 ...
    CustomComponent1,
    CustomComponent2
  ],
  // Angular 9以下版本需要添加这一行
  // entryComponents: [CustomComponent1, CustomComponent2]
})
export class YourModule { }

这样点击按钮的时候，就会自动添加新的标签页，并且在标签里加载对应的自定义组件啦！

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