PrimeNg TabView 动态组件答案

【问题标题】：PrimeNg TabView dynamic componentPrimeNg TabView 动态组件
【发布时间】：2021-05-10 17:56:24
【问题描述】：

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

我对 Angular 不是很熟悉，但是整天都在尝试。在我看来，根本问题与 TabView 如何识别 DOM 中继承的 TabPanel 相关，但不幸的是，这不是我可以改变的——可以吗？

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

【问题讨论】：

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

标签： angular primeng tabview angular-dynamic-components

【解决方案1】：

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

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

}

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

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

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

【讨论】：