停止选项卡change primeNG Angular 4

要在Angular 4中使用PrimeNG并停止p-tabView组件的change事件，您需要：

第一步：首先，在 app.module.ts 文件中，确保已经导入了 TabViewModule：

import { TabViewModule } from 'primeng/primeng';

@NgModule({
  imports: [
    // ...其他模块
    TabViewModule // 将TabViewModule添加到imports数组中
  ],
  // ...其他配置
})
export class AppModule { }

第二步：在您的组件 TypeScript 文件中（例如：app.component.ts），导入 TabView 和 OnChangeEvent：

import { TabView, OnChangeEvent } from 'primeng/tabview';

第三步：在组件类中，为 TabView 组件添加 (onChange) 事件监听器，并使用 preventDefault 方法阻止默认行为。

export class AppComponent implements OnInit {
  @ViewChild(TabView) tabView: TabView;

  ngOnInit() {
  }

  onTabChange(event: OnChangeEvent) {
    event.originalEvent.preventDefault(); // 阻止默认跳转行为
    console.log('Tab changed, but prevented default behavior');
  }
}

第四步：在组件的 HTML 模板文件中（例如：app.component.html），添加 onTabChange 事件监听器：

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

现在，当您切换选项卡时，onTabChange 方法会被调用，但选项卡的默认跳转行为将被阻止。您可以在 onTabChange 方法中根据需要添加自定义逻辑。