Question

我＆＃39;我在Angular 2中开发了一个app，其中有一个Parent Component和chile组件。子组件具有keydown事件的hostlistener并执行一些功能，M能够实现这一点，但问题是如果我按下Parent组件的上下文中的任何键，那么HostListener也会执行。我想要的是，如果我在chile组件的上下文中，Host监听器应该执行。

这不符合我的意图。它在智利组件

@HostListener('keydown', ["$event"])
ondropdown(){ functionality }

这是有效的，但在整个页面上，即使我尝试了“窗口”＃39;但效果是一样的。

@HostListener('document:keydown', ["$event"])
ondropdown(){ //functionality }

Answer 1

在我看来，你有一个冒泡。在这种情况下，您应该停止从子组件冒泡到父组件的事件，并防止从父组件到子组件的默认事件。

对于孩子：

  @HostListener('keydown', ["$event"])
    ...
      event.stopPropagation();
    }

对于父母：

  @HostListener('keydown', ["$event"])
    ...
      event.preventDefault();
    }

Answer 2

不是真正的答案，但我在这个博客中看到键盘事件有一个特定的事件对象 - https://www.ghadeer.io/angular-2-keyboard-events/尝试将事件参数作为KeyboardEvent进行转换，然后使用typescript自动完成（或只是控制台）。 log（）it）查看它可用的属性。也许它有一些可以表明焦点的东西。我可以在网上找到使用Angular 2/4应用程序中的关键监听器的人的每个例子都将它们绑定到文档。

角度为2的特定于组件的HostListener

2 个答案: