防止默认值在 p-tabView 中不起作用

Question

我在 Angular 应用程序中使用 PrimeNG 的 p-tabView 来管理多个选项卡。我想防止选项卡在某些情况下发生更改。我尝试在onChange事件中使用preventDefault方法，但它似乎不起作用。 我的目标很简单，就是通过任何方式防止选项卡更改，我还尝试将活动选项卡索引修改为 onChange 事件中的相同索引，但是它会重新加载组件。

ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onTabChange(event: any) {
    // Some condition to prevent tab change
    if (someCondition) {
      event.preventDefault();
    }
  }
}


Html:

<p-tabView (onChange)="onTabChange($event)">
  <p-tabPanel header="Tab 1">
    Content of Tab 1
  </p-tabPanel>
  <p-tabPanel header="Tab 2">
    Content of Tab 2
  </p-tabPanel>
</p-tabView>

我想在某种条件下停止p-tabView选项卡的变化

Answer 1

您可以在某些条件下禁用选项卡面板：

<p-tabPanel [disabled]="isDisabled" header="Header I">
    ...
</p-tabPanel>

我创建了一个 STACKBLITZ 来演示它。选中/取消选中复选框以查看其实际情况。