带有ConfirmDialog的PrimeNg TabView不起作用

问题描述

我尝试将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:() =>{        }
      });
}

您对如何使用“确认”对话框阻止或允许更改选项卡有想法吗？

谢谢

解决方法

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

1️⃣我们需要通过ng-template设置标题，或者将其称为自定义标题

模板

ERROR: Files of type "C:\Test\My file name has an explanation point here.txt" not found.

2️⃣我们将click事件绑定到新的标题文本，并通过使用鼠标事件<p-tabPanel > <ng-template pTemplate="header"> <div (click)="handleChange($event,0)"> Godfather I </div> </ng-template> ..... </p-tabPanel>方法来阻止更改?，现在我们可以通过确认结果来控制更改，但是您需要传递当前选项卡{ {1}}，这就是为什么我向stopPropagation添加另一个参数的原因

组件

index

如果再次单击同一活动选项卡，if块handleChange用于阻止显示确认对话框

demo ??

angular8 primeng