Angular2 从键盘事件中捕捉删除按钮按下

Question

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

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

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

Answer 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..
}

Answer 2

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

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

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

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

欲了解更多详情，您可以在这里查看详细信息。

如何监听整个页面的按键事件？