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();      
   // ...
}