Angular - 事件發生后重新觸發事件 event.preventDefault()

Question

我在我的應用程序中使用帶有PrimeNG Angular 12來實現custom confirm()函數。 用例如下：

當用戶單擊表單上的任何復選框或單選按鈕時，在事件觸發之前，應顯示確認消息，詢問用戶是否真的想要繼續。

為了實現這一點，我使用event.preventDefault(); 首先阻止選擇，然后如果用戶在自定義確認消息上單擊“是”，我想重新觸發剛剛阻止的事件。 下面的代碼示例：

復選框更改

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;

或者相應地，如果它是一個單選按鈕，但我想以“通用方式”實現它，有什么想法嗎？

提前致謝！

Answer 1

解決了

在此之后，我所做的是在openConfirmDialog()函數中傳遞調用單擊事件的目標元素，然后在confirmationService 的accept事件上，我手動重新單擊（）輸入元素。 對於這個功能，我們需要引入一個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: () => {

  }
 });
}