角度 2 中的组件特定 HostListener答案

【问题标题】：Component specific HostListener in angular 2角度 2 中的组件特定 HostListener
【发布时间】：2017-08-23 12:15:07
【问题描述】：

我正在使用 Angular 2 开发一个应用程序，其中我有一个父组件和子组件。子组件具有 keydown 事件的 HostListener 并执行一些功能。我能够做到这一点，但问题是如果我在父组件的上下文中按下任何键，那么 HostListener 也会执行。如果我在子组件的上下文中，我想要的是执行 HostListener。

这不符合我的预期。它在子组件中

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

这是有效的，但在整个页面上，我什至尝试了“窗口”，但效果是一样的。

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

【问题讨论】：

in context of Parent component 是什么意思？
关键监听器一般根据焦点所在位置触发。如何确定焦点是否在宿主元素上？
是的，在没有任何焦点的情况下，我觉得它只会在全局范围内触发，几乎与文档侦听器相同。

标签： javascript angular typescript

【解决方案1】：

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

对于孩子：

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

对于父母：

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

【讨论】：