PrimeNg TabView 动态组件

问题描述

我正在遵循 this 方法基于配置 JSON 在 Angularapp 中动态创建元素。 不幸的是，这似乎不适用于所有 PrimeNG 组件。尤其不是我也想使用的 TabView。

我对 Angular 不是很熟悉，但已经尝试了一整天。在我看来，根本问题与 TabView 如何识别 DOM 中继承的 TabPanels 相关，但不幸的是，这不是我可以更改的 - 可以吗？

此外，似乎有一个 GitHub issue 与此相关，但事实证明他们最终编写了自定义选项卡组件。有没有人看到解决这个问题的方法？它与 Prime 堆栈中的其他对象/元素配合得很好，只是 tabview 表现得有点奇怪......

解决方法

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

create-dynamic-component.service

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);
        });
      }
    }
  }

TabViewComponent

@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,viewRef);
      this.changeDetector.detectChanges();
    });
  }

}

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

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

PrimeNg TabPanel 本身是在 TabView 组件中创建和模板化的