Блог

Я использую @hostlistener в директиве Angular7. Могу ли я использовать для этого более одного события?

Проблема в том, что прослушивание события ‘keydown’ подходит для чего угодно, кроме Android, поскольку у последнего нет ключевых событий.

Переключение на событие ‘input’ решает эту проблему, но не распространяется на Firefox (и, вероятно, Edge), поскольку в последнем нет ‘inputType’ (и других вещей), что приводит к тому, что фактическое поле ввода разрешает любой ввод.

Итак, моя цель — иметь возможность использовать ‘keydown’ для Firefox и Edge и использовать ‘input’ для чего-либо еще. Возможно ли это?

Используемые события ‘keydown’, ‘keypress’ и ‘input’

     @HostListener('input', ['$event'])
    onInput(event: any) {
        this.parseKeyDown(event);
    }
  

     parseKeyDown(event: any) {
        if (event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward') {
            let str = this.ngModel.substr(0, this.ngModel.length - 1);
            if (str.length === 0) {
                str = '0';
            }
            // handle 'str'
        }
...
        if (e.inputType === 'insertText' amp;amp; e.data.match(this.regex)) {
            // handle ngModel
        }
    }
  

Код сокращен для удобства чтения.

Это работает во всем, кроме Firefox / Edge, где нажатие клавиш backspace или delete удаляет последний символ. В Firefox поле просто возвращается к текстовому полю, допускает любой ввод GUI и не обновляет ngModel.

Поскольку в Firefox нет ‘inputType’, ничего не происходит.

ОТРЕДАКТИРУЙТЕ мое решение

     @HostListener('keydown', ['$event'])
    @HostListener('input', ['$event'])
    onInput(e: any) {
        this.parseKeyDown(e);
    }

    parseKeyDown(e: any) {
        const key = e.key;
        if (key) { // Browsers WITH key events
...
        } else { // Browsers WITHOUT key events
            const data = e.data;
            const inputType = e.inputType;
...
  

С @hostlistener помощью вы можете прослушивать одно событие с помощью одного декоратора. Если вы хотите прослушать несколько событий, вы можете добавить несколько @hostlistener к одной функции, например

 @HostListener('click', ['$event'])
@HostListener('mouseover', ['$event'])
onEvent(event) {
    console.log(event)
}
  

Если это нежелательно, вы можете подключиться к плагину Angular Event Manager и настроить его. Вот статья, показывающая это.