Angular 5: Триггер mat-автозаполнение при нажатии определенной клавиши

#angular #angular-material #angular5

#angular #angular-материал #angular5

Вопрос:

Я пытаюсь придумать что-то вроде функции тегирования на Facebook, т. Е. всякий раз, когда нажимается клавиша «@», должно запускаться мое автозаполнение, и я должен иметь возможность видеть опцию, соответствующую введенному сообщению с данными «@».

Я не могу привязать автозаполнение к нажатию клавиши (или любому ключевому событию)

Любые предложения о том, как достичь этой функциональности, были бы оценены, мое последнее средство — создать свой собственный модуль автозаполнения

Ответ №1:

Для достижения этой цели вы можете сделать следующее.

Создайте ViewChild , чтобы получить ссылку на MatAutocompleteTrigger

 @ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

Создайте, HostListener чтобы задать formControl значение @ и открыть панель при нажатии @ клавиши.

 @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key == '@') {
      this.stateCtrl.setValue('@');
      this._auto.openPanel();
    }
  }

Stackblitz

В этом стековом блоке щелкните вид, чтобы установить фокус, иначе событие не вызовет HostListener

https://stackblitz.com/edit/angular-4x3zte?embed=1amp;file=app/autocomplete-overview-example.ts