Angular2从键盘事件中捕获删除按钮按下答案

【问题标题】：Angular2 Catch the Delete button press from keyboard eventAngular2从键盘事件中捕获删除按钮按下
【发布时间】：2020-07-10 12:47:52
【问题描述】：

我在 gridview 中有多个记录。我可以选择从 gridview 中选择多条记录。

选择后我想删除这些选定的记录。

谁知道当从键盘上按下删除按钮时，我如何在angular2中调用删除事件？

【问题讨论】：

文档展示了如何处理 Enter 键。您可以对删除键执行相同的过程：angular.io/guide/user-input#key-event-filtering-with-keyenter
只需检查Delete键码并执行相应操作

标签： angular events

【解决方案1】：

如果您想在任何特定的键盘按钮按下时执行任何事件，在这种情况下，您可以使用@HostListener。为此，您必须在组件 ts 文件中导入 HostListener。我可以使用以下函数来执行删除键盘按下。

从 '@angular/core' 导入 { HostListener }； 然后在组件 ts 文件中的任何位置使用以下函数。

    @HostListener('document:keyup', ['$event'])
      handleDeleteKeyboardEvent(event: KeyboardEvent) {
        if(event.key === 'Delete')
        {
          // remove something... or call remove funtion this.remove();
        }
      }
remove(){ 
// code..
}

【讨论】：

【解决方案2】：

我在项目中使用这种方式来处理删除按钮的使用

@HostListener('document:keydown.delete', ['$event'])

我为谁担心

@HostListener('document:keydown.delete', ['$event'])
onDeleteComponent(event: KeyboardEvent) {
    this.removeItem(this.selectedDashboardItem);
}

【讨论】：

【解决方案3】：

在 angular2 中使用 @HostListener 绑定对我有用的键盘事件。

import { HostListener } from '@angular/core';

@Component({
  ...
})
export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

更多详情，您可以在这里查看详情。

How can I listen for keypress event on the whole page?

【讨论】：

这仅适用于字母/数字键，但不适用于 DEL