Question

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

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

当我仅在系统中仅使用过一次的页面中使用指令时，此方法有效。

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

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

我是不是以某种错误的方式使用了@HostListener，还是听起来像应该提交的错误？无论哪种情况，都会有某种解决方法真的很有帮助。

谢谢

Answer 1

只需对此进行更新：

最后，我的印象是，这归因于角度错误（请参见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);
}

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

Angular @HostListener事件多次触发

1 个答案: