我可以使用多个@hostlistener或基于浏览器的事件吗? [英] Can I use multiple @hostlistener or events based on browser?

问题描述

我在Angular7指令中使用@hostlistener.我可以在这个事件上使用多个事件吗?

I'm using @hostlistener in Angular7 directive. Can I use more than one event on this?

问题是侦听'keydown'事件在除Android之外的任何设备上都可以，因为后者没有任何键事件.

Problem is that listening for the 'keydown' event is fine on anything but Android as the latter has no key events.

切换到输入"事件可以解决此问题，但不涉及Firefox(可能还有Edge)，因为后者上没有"inputType"(及其他东西)，这会导致实际的输入字段允许任何输入.

Switching to 'input' event solves this problem but doesn't cover Firefox (and probably Edge) as there's no 'inputType' (and other things) on the latter which causes the actual input field to allow any input.

所以我的目标是能够对Firefox和Edge使用'keydown'而对其他任何东西都使用'input'.有可能吗?

So my goal is to be able to use 'keydown' for Firefox and Edge and use 'input' for anything else. Is that possible?

使用了'keydown'，'keypress'和'input'事件

Used 'keydown', 'keypress' and 'input' events

    @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之外的任何其他版本上均有效，按退格键或Delete键会删除最后一个字符.在Firefox中，该字段只是回退到文本字段，允许任何GUI输入，并且不会更新ngModel.

This works in anything but Firefox/Edge where pressing backspace or delete keys deletes the last char. In Firefox the field just falls back to a text field, allows any GUI input and doesn't update ngModel.

由于Firefox中没有'inputType'，因此没有任何反应.

Since there's no 'inputType' in Firefox nothing happens.

编辑我的解决方案

    @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 添加到单个函数中，例如

With @hostlistener you can listen to single event with a single decorator. If you want to listen for multiple events you can add multiple @hostlistener to a single function e.g

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

如果不需要，可以挂接到Angular Event Manager插件并对其进行自定义.这是文章显示的内容.

If it's not desirable you can hook into Angular Event Manager Plugin and customize it. Here is an article show this.

这篇关于我可以使用多个@hostlistener或基于浏览器的事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！