Question

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

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

切换到“输入”事件可解决此问题，但不涉及Firefox（可能还有Edge），因为后者上没有“ inputType”（及其他内容），这会导致实际的输入字段允许任何输入。

所以我的目标是能够对Firefox和Edge使用'keydown'而对其他任何东西都使用'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之外的任何其他版本上均有效，按退格键或Delete键会删除最后一个字符。在Firefox中，该字段只是退回到文本字段，允许任何GUI输入，并且不会更新ngModel。

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

Answer 1

使用@hostlistener，您可以使用单个装饰器收听单个事件。如果您想监听多个事件，可以将多个@hostlistener添加到单个函数中，例如

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

如果不需要，可以挂接到Angular Event Manager插件并对其进行自定义。这是article的节目。

我可以基于浏览器使用多个@hostlistener或事件吗？

1 个答案: