Angular 初始化TabView动态组件

我遵循基于JSON配置在AngularApp中动态创建元素的方法。 不幸的是，这似乎并不适用于所有的打底组件。尤其不是我想利用的TabView

我对Angular不是很熟悉，但已经试了一整天了。在我看来，潜在的问题与TabView如何识别DOM中继承的TabPanels有关，但不幸的是，这不是我可以改变的——可以吗

---

此外，似乎还有一个与此相关的问题，但事实证明他们最终编写了一个自定义选项卡组件。有人想办法解决这个问题吗？它可以很好地处理主堆栈中的其他对象/元素，只是tabview的行为有点奇怪…

我能够解决这个问题。基本上可以归结为停止TabView组件中CreateDynamicComponentService的递归foreach循环，在TabView中设置tabs变量，然后从服务中重新启动递归函数：

创建动态组件。服务

createComponent(content: any, type: any, vcRef) {
    const componentRef = this.renderComp(content, type, vcRef)
    if (content.nodes && content.nodes.length) {
      if (!componentRef.instance.embeddedContainer) {
        const cmpName = componentRef.instance.constructor.name;
        if (cmpName != 'TabViewComponent') {
          throw new TypeError('Trying to render embedded content. ${cmpName} must have @ViewChild() embeddedContainer defined');
        }
      } else {
        content.nodes.forEach(type => {
          const typeP = this.contentMappings[type.type];
          this.createComponent(type, typeP, componentRef.instance.embeddedContainer);
        });
      }
    }
  }

选项卡视图组件

@Component({
  selector: 'dynamic-page-tab-view',
  template: '<p-tabView dynamic="true" cache="false">
                <p-tabPanel [header]="tab.header" *ngFor="let tab of tabs; let i = index" [selected]="i == 0">
                {{ tab.header }}
                    <ng-container #panel></ng-container>
                </p-tabPanel>
            </p-tabView>'
})
export class TabViewComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef,  static: true })
  embeddedContainer: ViewContainerRef;

  @ViewChildren('panel', {read: ViewContainerRef}) tabPanels: QueryList<ViewContainerRef>

  activeIndex: number;
  tabs: any = []

  constructor(private changeDetector : ChangeDetectorRef,
              private viewContainerRef: ViewContainerRef,
              private createDynamicComponentService: CreateDynamicComponentService,
              @Inject(CONTENT_MAPPINGS) private contentMappings: any) { }

  contentOnCreate(values: { [key: string]: any; }): void {
    this.tabs = values["nodes"];
    this.activeIndex = 0;
  }

  ngAfterViewInit() {
    this.tabPanels.forEach((viewRef: ViewContainerRef, index: number) => {
      console.log(index, viewRef, this.tabs[index]);
      const type = this.tabs[index];
      const typeP = this.contentMappings[type.type];
      this.createDynamicComponentService.createComponent(type, typeP, viewRef);
      this.changeDetector.detectChanges();
    });
  }

}

@组件({
选择器：“动态页面选项卡视图”，
模板：'
{{tab.header}}
'
})
导出类TabViewComponent实现AfterViewInit{
@ViewChild（'container'，{read:ViewContainerRef，static:true}）
embeddedContainer:ViewContainerRef；
@ViewChildren（'panel'，{read:ViewContainerRef}）选项卡panels:QueryList
活动索引：编号；
制表符：any=[]
构造函数（专用变更检测器：ChangeDetectorRef，
私有viewContainerRef:viewContainerRef，
私有createDynamicComponentService:createDynamicComponentService，
@注入（CONTENT_映射）私有contentMappings:any{}
contentOnCreate（值：{[key:string]：any；}）：void{
this.tabs=值[“节点”]；
this.activeIndex=0；
}
ngAfterViewInit（）{
this.tabPanels.forEach（（viewRef:ViewContainerRef，index:number）=>{
log（index，viewRef，this.tabs[index]）；
const type=this.tabs[index]；
const typeP=this.contentMappings[type.type]；
createDynamicComponentService.createComponent（type、typeP、viewRef）；
this.changeDetector.detectChanges（）；
});
}
}

重要的是，TabPanel组件只存在于单个容器中

<ng-container #container></ng-container>

---

Priming选项卡面板本身是在选项卡视图组件中创建和模板化的

您到底有什么问题？你犯了什么错误？请更具描述性。分享你的代码和你试图使用的JSON文件。对不起，我有点赶时间。stackblitz的代码示例已更新