在 PrimeNg 中将 tabPanel 动态添加到 tabView答案

【问题标题】：Dynamically Add tabPanel to tabView in PrimeNg在 PrimeNg 中将 tabPanel 动态添加到 tabView
【发布时间】：2019-07-30 09:34:21
【问题描述】：

我想要一个“添加选项卡”按钮，单击该按钮时我想将一个新选项卡（tabPanel）添加到现有的 tabView 列表中。到目前为止，我能够通过单击“添加选项卡”按钮添加新选项卡，但我不确定如何将动态 html 内容添加到选项卡。

appComponent.html

<button pButton (click)="addTab()" label="selected header"></button>
<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
  <p-tabPanel header="first" [selected]="true">
    Hello1
  </p-tabPanel>
  <p-tabPanel header="second" cache="false">
    hello2
  </p-tabPanel>
</p-tabView>

app.component.ts

import {Component, ViewChild, ViewContainerRef} from '@angular/core';
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private viewContainerRef: ViewContainerRef) {
  }

  @ViewChild(TabView) tabView: TabView;

  addTab() {
    const tab: TabPanel = new TabPanel(this.viewContainerRef);
    tab.header = 'Tab3';
    tab.closable = true;
    this.tabView.tabs.push(tab);
  }
}

【问题讨论】：

标签： angular primeng

【解决方案1】：

import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private componentFactoryResolver: ComponentFactoryResolver, 
      private viewContainerRef: ViewContainerRef) {
  }

  @ViewChild(TabView) tabView: TabView;

  addTab() {
    let nTabs = this.tabView.tabs.length;
    const tab: TabPanel = new TabPanel(this.viewContainerRef);
    tab.header = 'Tab' + (nTabs+1);
    tab.closable = true;
    const component: any = <some component>;
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.viewContainerRef.createComponent(factory);
    this.tabView.tabs.push(tab);
  }
}

【讨论】：