时间戳

首页 > 解决方案 > Angular @HostListener 事件多次触发

angular - Angular @HostListener 事件多次触发

问题描述

我正在构建一个 Ionic 3 应用程序，我在其中创建了一个“自动完成”指令，这是一个简单的指令，当元素获得焦点时会弹出一个自动完成对话框。这是通过“自动完成”完成的：

@HostListener('ionFocus', ['$event._native.nativeElement'])
  onFocus(target) {
      target.blur();
      this.showAutocompleteDialog(target);
  }

当我只在系统中只使用过一次的页面中使用该指令时，这很有效。

但后来我制作了一个新组件，我们称之为“AddressField”，它在其模板中的一个元素中有一个“自动完成”指令。现在@HostListener onFocus 事件被触发两次，因此显示了两个自动完成对话框。

这只发生在 AddressField 组件中的“自动完成”指令中，并且它只会在系统中的第二个“AddressField”实例中触发两次。

我是否以某种错误的方式使用了@HostListener，或者这听起来像是一个应该提交的错误？在任何一种情况下，某种解决方法都会非常有帮助。

谢谢

标签： angulareventsionic3

解决方案

只是对此的更新：

最后，我的印象是这归结为 Angular 中的一个错误（参见 fx https://github.com/ionic-team/ionic-v3/issues/86） - 至少，我无法找到我的方法有任何问题。

我的解决方案很老套：我在指令中添加了一个标志“alreadyFired”，并在我的 HostListener 函数中检查它。

@HostListener('ionFocus', ['$event._native.nativeElement'])
  onFocus(target) {
    if (this.alreadyFired) {
      return;
    }
    this.alreadyFired = true;
    target.blur();
    this.showAutocompleteDialog(target);
}

当然，在关闭对话框时，我再次将 alreadyFired 标志设置为 false。哈克，但在最后期限内工作..

推荐阅读