如何为PrimeNG tabPanel设置不随显隐变化的静态索引

PrimeNG 的 p-tabView 没有内置固定静态索引的原生属性，但可以通过以下两种方案实现固定步骤匹配，不受条件渲染影响：

方案1：自定义属性映射固定步骤值 #

直接给每个 p-tabPanel 绑定固定的步骤自定义属性，事件触发时直接读取该属性值即可，无需依赖组件自带的动态索引：

模板代码 #

<p-tabView (onChange)="handleTabViewChange($event)">
    <p-tabPanel header="Step 1" data-step="1">
    </p-tabPanel>
    <p-tabPanel header="Step 2" *ngIf="false" data-step="2">
    </p-tabPanel>
    <p-tabPanel header="Step 3" data-step="3">
    </p-tabPanel>
</p-tabView>

事件处理代码 #

data: any[];

handleTabViewChange(e) {    
  // 读取当前激活tab绑定的固定step值
  const activeTab = e.tabView.tabs[e.index];
  const step = parseInt(activeTab.el.nativeElement.getAttribute('data-step'));
  this.data = this.loadData(step);
}

方案2：动态配置渲染tab列表 #

把步骤配置成带固定step属性的数组，过滤掉不需要展示的步骤，动态渲染tab，索引直接匹配配置项的固定step值即可：

组件配置代码 #

// 定义固定步骤配置，show属性控制是否展示
stepTabs = [
  { header: 'Step 1', step: 1, show: true },
  { header: 'Step 2', step: 2, show: false },
  { header: 'Step 3', step: 3, show: true }
].filter(item => item.show);

模板代码 #

<p-tabView (onChange)="handleTabViewChange($event)">
  <p-tabPanel *ngFor="let tab of stepTabs" [header]="tab.header">
  </p-tabPanel>
</p-tabView>

事件处理代码 #

data: any[];

handleTabViewChange(e) {    
  const step = this.stepTabs[e.index].step;
  this.data = this.loadData(step);
}

内容的提问来源于stack exchange，提问作者Bilal Dekar