keyup.enter/space 事件在“@fortawesome/angular-fontawesome”圖標上多次觸發 / Angular 6 項目

Question

在我的 angular 6 應用程序中，有一個很棒的圖標，如下所示：

<div>
   <fa-icon [icon]="trashIcon" class="custom-trash-icon" tabindex="0"
     (click)="onDeleteIconClick()"  (keyup.enter)="onDeleteIconClick()"  
     (keyup.Space)="onDeleteIconClick">
  </fa-icon>
</div>

in.ts 文件，它打開一個NgbModal模態 window 用於刪除確認，如果用戶按下“是”或“否”按鈕，它的目的是異步刪除所選資源，但是由於trash圖標的焦點沒有移動它不斷在“ enter ”或“ space ”鍵上一次又一次地彈出模態 window，但是，它在通過鼠標的Click事件上運行良好。

.ts文件代碼

public onDeleteIconClick() {
        
        const modalRef = this._modalService.open(DeleteComponent, {
            backdrop: "static",
            windowClass: "custom-modal",
            keyboard: true,
            centered: true,
        });
        modalRef.componentInstance.confirmationText = `Do you want to delete the resource?`;
        modalRef.result.then(
            (result) => {
                if (result && result.toLowerCase() === "yes")
                 {
                         this.deleteResource.emit();
                   
                }
            },
            (reason) => { }
        );

    }

我相信那是因為焦點沒有從 thrash 圖標移開，有沒有人遇到過類似的問題？

請注意keyup.enter和keyup.enter事件是針對可訪問性目的的。

編輯***************

這是stackblitz ，其中一旦你點擊垃圾桶圖標，當它打開模式 window 時，使用鍵盤的回車鍵點擊取消，請注意模式 window 將繼續出現。

Answer 1

最好的解決方案（如 Andy 的評論中所建議的）是使用<button>並完全刪除鍵盤綁定：

<button type="button" (click)="onDeleteIconClick()">
   <fa-icon [icon]="trashIcon" class="custom-trash-icon" tabindex="0">
   </fa-icon>
</button>

如果出於某種原因您想堅持使用當前模板，您可以將事件 object 傳遞給onDeleteIconClick()並從 function 中移除焦點：

// HTML
<fa-icon [icon]="trashIcon" class="custom-trash-icon" tabindex="0"
     (click)="onDeleteIconClick($event)"  
     (keyup.enter)="onDeleteIconClick($event)"  
     (keyup.Space)="onDeleteIconClick($event)">
</fa-icon>

// TS
onDeleteIconClick(ev) {
   ev.currentTarget.blur();      
   // ...
}