0

我在我的应用程序中使用Angular 12withPrimeNG来实现一个custom confirm()功能。用例如下：

当用户点击表单上的任何复选框或单选按钮时，在事件触发之前，应显示一条确认消息，询问用户是否真的想要继续。

为了实现这一点，我event.preventDefault();首先使用阻止选择，然后如果用户在自定义确认消息上单击“是”，我想重新触发刚刚阻止的事件。下面的代码示例：

onCheckboxChange

onCheckboxChange(event: Event) {
   event.preventDefault(); // prevent the default click in the first place

   this.openConfirmDialog( () => {
     // re-trigger event here, for example 'event.trigger();'
  }, event);
}

打开确认对话框

openConfirmDialog(acceptAsync: any, event: Event) {
    this.confirmationService.confirm({
    message: 'Are you sure you want to make this change? Progress will be lost',
    accept: () => {
    //Actual logic to perform a confirmation
    acceptAsync();
   },
   reject: () => {
    event.preventDefault();
   }
});

}

对于这个用例，我是否走在“正确的道路”上？我知道我可以专门为每种情况设置检查的值（如果它是复选框），例如：

this.event.currentTarget.checked = true;

或者相应地，如果它是一个单选按钮，但我想以“通用方式”实现它，有什么想法吗？

提前致谢！

4

1 回答 1

0

解决了

在此之后，我所做的是在openConfirmDialog()函数内部传递调用 click 事件的目标元素，然后在accept确认服务的事件中，我手动重新 click() 输入元素。对于这个功能，我们需要引入一个boolean flag( let fromManualClick = false)

代码解决方案

onCheckBoxChange

onCheckboxChange(event: Event) {
  if(fromManualClick){
    event.preventDefault(); // prevent the default click in the first place

    this.openConfirmDialog( () => {
    // my logic here
    }, (event.currentTarget as HTMLInputElement));
  }
  fromManualClick = false;
}

打开确认对话框

openConfirmDialog(acceptAsync: any, srcElement: HTMLInputElement) {
  this.confirmationService.confirm({
  message: 'Are you sure you want to make this change?',
  accept: () => {
    acceptAsync();
    //re-trigger the click element
    fromManualClick = true;
    srcElement.click();
  },
  reject: () => {

  }
 });
}
于 2021-07-22T14:14:01.540 回答