Событие Angular @HostListener вызвано несколько раз

Question

Я создаю приложение Ionic 3, в котором я сделал директиву «автозаполнения», которая является простой директивой, которая всплывающее диалоговое окно автозаполнения, когда элемент получает фокус. Это делается в «автозаполнение» через:

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

Это сработало, когда я использовал директиву только на страницах, которые использовались только один раз в системе.

Но затем я создал новый компонент, назовем его «AddressField», у которого есть директива «автозаполнение» в одном из элементов шаблона. Теперь событие @HostListener onFocus запускается дважды, и поэтому отображаются два диалоговых окна автозаполнения.

Это происходит только для директив auto-complete в компонентах AddressField и срабатывает только дважды для второго экземпляра. "AddressField" в системе.

Я каким-то образом неправильно использую @HostListener, или это звучит как ошибка, которую следует зарегистрировать? В любом случае, обходной путь какой-то быть действительно полезным.

Спасибо

Answer 1

Просто обновление по этому вопросу:

В конце концов, у меня сложилось впечатление, что это сводится к ошибке в углу (см. Fx https://github.com/ionic-team/ionic-v3/issues/86) - по крайней мере, я не смог найти никаких проблем с моим подходом.

Мое решение было хакерским: я добавил флаг «уже запущен» в свою директиву, проверяя это в моей функции HostListener.

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

И затем, конечно, при закрытии диалогового окна, я снова снова установил флаг уже запущенного на false. Хаки, но работает в срок ...