angular8 - 带确认对话框的 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️⃣ 我们将点击事件绑定(bind)到新的标题文本，并通过使用鼠标事件 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 🚀🚀