带有 ConfirmDialog 的 PrimeNg TabView 不起作用

Question

我尝试将 PrimeNg TabView 组件与 confirmDialog 一起使用但未成功我能够显示此确认对话框，但它出现在用户切换到错误的目标选项卡面板后。

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


handleChange(e) {
  this.confirmationService.confirm({
      message: 'There are unsaved changes, do you want to proceed?',
      accept:  () => {
      this.index = e.index;
      },
      reject:() =>{        }
      });
}

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

谢谢

Answer 1

没有正式的方法来防止通过按下该选项卡更改到另一个选项卡，但是首先有一个解决方法我们需要防止通过单击选项卡更改选项卡，

1️⃣我们需要通过ng-template设置header或者调用自定义header

模板

    <p-tabPanel >
        <ng-template pTemplate="header">
            <div (click)="handleChange($event,0)">
                Godfather I
            </div>
        </ng-template>

         .....

    </p-tabPanel>

2️⃣我们给新的header文本绑定了一个点击事件，通过鼠标事件stopPropagation方法我们可以阻止改变，现在我们可以通过确认结果来控制改变，但是你需要传递当前标签index，这就是我向 handleChange

添加另一个参数的原因

分量

 handleChange(e:MouseEvent,tabIndex:number) {
    e.stopPropagation();
    if (this.index == tabIndex){
      return;
    }
    // console.log(tabIndex)
    this.confirmationService.confirm({
      message: "There are unsaved changes, do you want to proceed?",
      accept: () => {
        this.index = tabIndex;
      },
      reject: () => {}
    });
  }

the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again

demo

带有 ConfirmDialog 的 PrimeNg TabView 不起作用

PrimeNg TabView with ConfirmDialog not working

primeng

angular8