Угловое событие @hostlistener запускается несколько раз

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

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

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

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

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

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

Спасибо

2
0
1 742
1

Ответы 1

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

В конце концов, у меня сложилось впечатление, что это сводится к ошибке в angular (см. 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);
}

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

Другие вопросы по теме