angular - Angular：当我将鼠标移出组件时不再触发事件侦听器

Question

我的 Angular 应用程序中有一个上下文菜单，我想在该上下文菜单打开时按下一个键时触发回调。我在上下文菜单的构造函数中添加了以下代码：

window.addEventListener('keydown', function() {
  console.log('keys pressed');
});

如果我打开上下文菜单，将光标悬停在它上面，然后按一个键，它会成功触发此回调。但是，如果我将鼠标移出菜单，当我按下一个键时它不再触发它。此外，即使我将鼠标移回菜单上，它仍然没有响应。无论光标在哪里，只要上下文菜单打开，我都希望它在我按下一个键时做出响应。

有任何想法吗？

Answer 1

您需要 keyDown 和 click 事件来正确监听上下文菜单事件。完整的代码可以在这个StackBlitz Link中找到

您的组件代码是..

contextmenu:boolean = false;
styleSelect: boolean = false;

clickMe(){
   this.contextmenu = !this.contextmenu;
   this.styleSelect === true ? this.styleSelect= false : '';
   document.addEventListener('keydown', this.scroll, false );
}

scroll = (e): void => {
     if (e.target.tagName === 'LI' ) {document.removeEventListener('mousedown', this.scroll); }
     if (this.contextmenu === true) {
        this.contextmenu = false;
        this.styleSelect = true;
        document.removeEventListener('keydown', this.scroll);
     }
 }

 close(){
   this.contextmenu = false;
 }

Answer 2

尝试这个

   @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
      console.log('keys pressed');
   }