多次触发 Angular @HostListener 事件

Question

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

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

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

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

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

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

谢谢

Answer 1

只是对此的更新:

最后，我的印象是这归结为 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。 Hacky，但在截止日期前工作..