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

Question

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

问题是监听 'keydown' 事件在 Android 之外的任何东西上都没有问题，因为后者没有关键事件。

切换到 'input' 事件解决了这个问题，但不包括 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 之外的任何东西，其中按退格键或删除键会删除最后一个字符。在 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;
...

Answer 1

有了@hostlistener你可以听一个单一装饰单个事件。如果您想侦听多个事件，您可以将多个事件添加@hostlistener到单个函数中，例如

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

如果不需要，您可以挂钩 Angular 事件管理器插件并对其进行自定义。这里有一篇文章展示了这一点。