创建和选择选项卡

首先，将以下示例HTML代码添加到组件模板中：

    Content of option 1
    Content of option 2
    Content of option 3

此代码将创建具有三个选项卡的TabView。要以编程方式选择其中一个选项卡，可以使用以下代码：

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

@Component({
  selector: 'my-component',
  template: ` 
    
      Content of option 1
      Content of option 2
      Content of option 3
    
    Select Tab 2
  `
})
export class MyComponent {

  @ViewChild("tabView") tabView: TabView;

  selectTab(index: number) {
    this.tabView.activeIndex = index;
  }

}

在上面的示例中，我们使用ViewChild装饰器获取对TabView组件的引用，并使用activeIndex属性将其设置为选项卡所对应的索引（从0开始）。最后，我们在按钮单击事件中调用selectTab方法，将其参数设置为我们要选择的选项卡的索引。

添加和删除选项卡

要以编程方式添加或删除选项卡，我们需要访问TabView组件的panels属性，并使用addPanel和removePanel方法。

以下代码演示如何向TabView添加新选项卡：

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

@Component({
  selector: 'my-component',
  template: ` 
    
      Content of option 1
    
    Add Tab
  `
})
export class MyComponent {

  @ViewChild("tabView") tabView: TabView;

  addTab() {
    const newTab = new TabPanel();
    newTab.header = "New Option";
    newTab.selected = true;
    newTab.content = "Content of new option";
    this.tabView.addPanel(newTab);
  }

}

在上面的示例中，我们创建了一个新的TabPanel实例，并设置其header，selected和content属性，然后将其添加到TabView的panels数组中。

以下代码演示如何从TabView中删除选项卡：

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

@Component({
  selector: 'my-component',
  template: ` 
    
      Content of option 1
      Content of option 2
      Content of option 3
    
    Remove Tab 2
  `
})
export class MyComponent {

  @ViewChild("tabView") tabView: TabView;

  removeTab(index: number) {
    const panel = this.tabView.panels[index];
    this.tabView.removePanel(panel);
  }

}

在上面的示例中，我们获取对要删除的TabPanel实例的引用，并将其传递给TabView的removePanel方法。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。