Question

我想要一个“添加标签”按钮，单击该按钮后，我想向tabView的现有列表添加一个新的Tab（tabPanel）。到目前为止，单击“添加标签”按钮，我可以实现新标签的添加，但是我不确定如何向标签添加动态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);
  }
}

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

在PrimeNg中将tabPanel动态添加到tabView

1 个答案: