时间戳

首页 > 解决方案 > Angulars HostListener 干扰了聚焦的 HTML 对象

angular - Angulars HostListener 干扰了聚焦的 HTML 对象

问题描述

我有两个组件，NavBarComponent和FooComponent.

我附加了一个HostListener并且FooComponent我在NavBarComponent.

FooComponent

@HostListener('document:keydown', ['$event'])
onKeydownHandler(event: KeyboardEvent): void { 
    switch (event.code) {
        case 'ArrowLeft': {
            /* do something in this component */
            $event.stopPropagation();
            break;
        }
    }
});

尽管从导航组件document.activeElement返回<input ...>字段，但 FooComponent 会使用该<-- arrow left事件。

当然，这是因为我调用stopPropagation了 ，但我假设侦听器根本不会收到事件，因为输入字段具有焦点。我在这里错过了什么吗？

标签： angular

解决方案

它确实得到了事件，因为'document:keydown'(or 'window:keydown') 是一个全局钩子。

您可能想要做的是FooComponent在 DOM 中的 DOM 或其任何子代不是目标时跳过您的代码。像这样的东西：

@HostListener('document:keydown', ['$event'])
onKeydownHandler(event: KeyboardEvent): void {
  switch (event.code) {
    case 'ArrowLeft': {
      if (this.elemRef.nativeElement.contains(event.target)) {
        /* do something in this component */
        event.stopPropagation();
        break;
      }
    }
  }
};

然后在构造函数中添加这个依赖：

constructor(
  private elemRef: ElementRef,

这应该允许您在输入框中使用左箭头键NavBarComponent。

顺便说一句，对我来说，在 Chrome 中，事件实际上并没有被阻止，直到我也return false;立即添加event.stopPropagation();. 据我所知，当你想取消一个事件时，返回一个错误的值总是一个好习惯。

推荐阅读