带有 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

基于 material 设计选项卡的类似，这是我的问题的解决方案：

在html声明一个局部变量引用TabViewDOM对象：

<p-tabView #onglets>...</p-tabView>
在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); }); }

Answer 2

我有类似的问题。在选项卡更改之前需要显示对话框。
我的解决方案：

HTML

<p-tabView #tabView (onChange)="onChange($event)" />

TS

@ViewChild('tabView') tabView: TabView;

  onChange(event: any) {

    const previoustab = this.tabView.tabs[this.prevIndex]; //saved previous/initial index
    previoustab.selected = true;
    const selectedTab = this.tabView.tabs[event.index];
    selectedTab.selected = false;
    this.tabView.activeIndex = this.prevIndex;
    this.nextIndex= event.index;
  }

  GoToNextTab() {

    this.tabView.activeIndex = this.nextIndex;
    this.prevIndex= this.nextIndex;
    this.tabView.open(undefined, this.tabView.tabs[this.nextIndex]);
  }

使用此代码，您将停留在选定的选项卡上，而不会更改选项卡样式。

带有 ConfirmDialog 的 PrimeNg TabView

PrimeNg TabView with ConfirmDialog

javascript

tabview

typescript

primeng

angular