如何用Angular Bootstrap动态添加包含组件内容的标签页？

1. 调整Tab数据结构 #

将原ITab接口中的字符串类型content替换为存储组件类的字段，同时可添加输入数据字段用于组件传参：

import { Type } from '@angular/core';

interface ITab {
  title: string;
  component: Type<any>; // 存储要注入的组件类
  componentData?: Record<string, any>; // 可选：传递给组件的输入参数
  removable: boolean;
  disabled: boolean;
  active?: boolean;
  customClass?: string;
}

更新tabs数组，替换为实际业务组件：

tabs: ITab[] = [
  { 
    title: '用户列表', 
    component: UserListComponent, 
    componentData: { pageSize: 10 },
    removable: false, 
    disabled: false
  },
  { 
    title: '系统设置', 
    component: SettingsComponent, 
    removable: true, 
    disabled: false
  }
];

2. 在模板中动态渲染组件 #

利用Angular的ngComponentOutlet指令，配合ng-template替换原字符串内容的渲染逻辑：

<tabset>
  <tab *ngFor="let tab of tabs" 
       [heading]="tab.title" 
       [active]="tab.active"
       [disabled]="tab.disabled"
       [removable]="tab.removable"
       (removed)="removeTab(tab)">
    <!-- 动态注入组件 -->
    <ng-template 
      [ngComponentOutlet]="tab.component"
      [ngComponentOutletInjector]="getComponentInjector(tab.componentData)">
    </ng-template>
  </tab>
</tabset>

3. 实现组件参数传递（可选） #

如果需要给动态组件传递输入参数，需创建自定义注入器：

import { Injector } from '@angular/core';

constructor(private injector: Injector) {}

// 创建带参数的注入器
private createComponentInjector(data: Record<string, any>): Injector {
  return Injector.create({
    providers: Object.keys(data).map(key => ({
      provide: key,
      useValue: data[key]
    })),
    parent: this.injector
  });
}

// 暴露给模板的注入器获取方法
getComponentInjector(data?: Record<string, any>): Injector {
  return data ? this.createComponentInjector(data) : this.injector;
}

在动态组件中通过@Inject接收参数：

import { Inject } from '@angular/core';

export class UserListComponent {
  constructor(@Inject('pageSize') public pageSize: number) {}
}

4. 模块中声明动态组件 #

确保动态组件已在对应Angular模块中声明（独立组件无需此步骤）：

@NgModule({
  declarations: [UserListComponent, SettingsComponent],
  // Angular 9+ 无需配置entryComponents，老版本需添加
  // entryComponents: [UserListComponent, SettingsComponent]
})
export class AppModule {}

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