javascript - 带有 ConfirmDialog 的 PrimeNg TabView

Question

我试图将 PrimeNg TabView 组件与 confirmDialog 一起使用但没有成功，这是我的代码:

<p-tabView (onChange)="onTabChange($event)" [(activeIndex)]="index">...</p-tabView> 


  onTabChange(event){
    this.confirmationService.confirm({
      message: 'Do you confirm ?',
      accept:  () => {
      this.index = event.index;
      },
      reject:() =>{        }
      });
   }

您是否知道如何使用确认对话框来阻止或允许选项卡更改？

谢谢

Answer 1

基于类似solution对于 Material 设计标签，这里是我的问题的解决方案:

1. 在 html 中声明一个引用 TabView DOM 对象的局部变量:

   <p-tabView #onglets>...</p-tabView>

2. 在 component.ts 中，更改单击具有特定选项卡时调用的默认函数功能来匹配你的情况:

   @ViewChild('onglets') onglets: TabView;
this.onglets.open = this.interceptOngletChange.bind(this);
...
interceptOngletChange(event: Event, tab: TabPanel){
const result = confirm(您真的要离开选项卡吗？ );
return result && TabView.prototype.open.apply(this.onglets, argumentsList);
});
}