PrimeNg TabView 动态组件

Question

我正在按照 this 方法根据配置 JSON 在 Angular 应用程序中动态创建元素。不幸的是，这似乎不适用于所有 PrimeNG 组件。尤其是我也想使用的 TabView。

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

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

Answer 1

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

创建动态-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 组件中创建和模板化的

PrimeNg TabView 动态组件

PrimeNg TabView dynamic component

tabview

primeng

angular

angular-dynamic-components