Могу ли я использовать несколько @hostlistener или событий на основе браузера? - PullRequest
Новая
       12

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

0 голосов
/ 13 апреля 2019

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

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

Переключение на 'ввод'event решает эту проблему, но не охватывает 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' && e.data.match(this.regex)) {
            // handle ngModel
        }
    }

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

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

Так как в Firefox нет «inputType», ничего не происходит.

1 Ответ

1 голос
/ 13 апреля 2019

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

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

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

...