Angular/PrimeNG动态创建Tab组件出现ASSERTION ERROR错误求助

错误原因 #

你遇到的断言错误核心原因是：*ngComponentOutlet 指令需要接收**组件类型（Component Class）**作为参数，但你传递的是通过 viewContainerRef.createComponent() 创建好的 ComponentRef 实例，两者不兼容，导致Angular内部断言检查失败。

解决方案一：直接使用 *ngComponentOutlet 传递组件类型与输入参数 #

这是最简洁的方案，利用 *ngComponentOutlet 原生支持的 inputs 参数传递组件属性，无需手动创建组件实例。

1. 修改逻辑代码 #

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

// 调整tabs数组结构，存储组件类型和对应输入参数
tabs: { title: string, componentType: Type<any>, inputs: Record<string, any> }[] = [];

constructor(private injector: EnvironmentInjector) { }

ngOnInit() {
  this.tabs = [
    { 
      title: "DefaultBookedView", 
      componentType: BookedRangeComponent,
      inputs: {
        filterBookedID: 1000,
        filterUserParam: "AB"
      }
    }
    // 其他权限对应的tab配置...
  ];
}

2. 修改模板代码 #

<p-tableView orientation="left">
  <p-tabPanel *ngFor="let tab of tabs" [header]="tab.title">
    <ng-container 
      *ngComponentOutlet="tab.componentType; 
      inputs: tab.inputs;
      injector: injector">
    </ng-container>
  </p-tabPanel>
</p-tableView>

解决方案二：手动创建组件并插入到Tab容器（适合复杂场景） #

如果需要对组件实例做更复杂的操作（比如订阅输出事件、动态销毁），可以通过ViewContainerRef手动将组件插入到对应Tab的容器中。

1. 修改模板代码 #

<p-tableView orientation="left">
  <p-tabPanel *ngFor="let tab of tabs; let i = index" [header]="tab.title">
    <!-- 每个Tab对应一个容器，用于插入动态组件 -->
    <div #tabContainer></div>
  </p-tabPanel>
</p-tableView>

2. 修改逻辑代码 #

import { Type, ViewChildren, QueryList, ViewContainerRef } from '@angular/core';
// ...

@ViewChildren('tabContainer', { read: ViewContainerRef }) 
private tabContainers!: QueryList<ViewContainerRef>;

tabs: { title: string, componentType: Type<any>, inputs: Record<string, any> }[] = [];

constructor(private injector: EnvironmentInjector) { }

ngOnInit() {
  this.tabs = [
    { 
      title: "DefaultBookedView", 
      componentType: BookedRangeComponent,
      inputs: {
        filterBookedID: 1000,
        filterUserParam: "AB"
      }
    }
    // 其他权限对应的tab配置...
  ];
}

// 确保容器初始化完成后再创建组件
ngAfterViewInit() {
  this.tabs.forEach((tab, index) => {
    const container = this.tabContainers.get(index);
    if (container) {
      // 清空容器避免重复创建
      container.clear();
      // 创建组件并赋值输入参数
      const componentRef = container.createComponent(tab.componentType, { 
        environmentInjector: this.injector 
      });
      Object.assign(componentRef.instance, tab.inputs);
      
      // 如果需要订阅组件输出事件，可在此处处理
      // componentRef.instance.someOutput.subscribe(...);
    }
  });
}

优化建议 #

• 对于布局相同、数据不同的Tab，可以复用同一个组件类，通过inputs传递不同的参数，避免重复创建组件类，减少代码冗余。
• 权限判断逻辑可以封装成单独的服务，在ngOnInit中根据权限动态生成tabs数组，保持组件逻辑清晰。

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