angular8 - 带有 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️⃣ 我们将点击事件绑定(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 🚀🚀