角度指令，无法将事件侦听器附加到元素答案

【问题标题】：Angular Directive, cannot attach event listener to element角度指令，无法将事件侦听器附加到元素
【发布时间】：2019-11-14 17:26:21
【问题描述】：

我尝试将keyup 事件绑定到属性指令内的输入元素。我已经尝试过像element.nativeElement.onkeyup 或element.nativeElement.addEventListener('keyup', () => {}) 这样的正常方式，但是当我输入时，什么也没有发生。

现在，我尝试使用HostListener 编写这样的代码

@HostListener('keyup', ['$event']) onKeyup(e) {}

更新

事实证明，@HostListener 必须是顶级才能工作。但是，当我输入输入时，什么也没有发生。这是指令的完整代码。

import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';

@Directive({
  selector: '[appKeyUp]'
})
export class KeyUpDirective implements OnInit {
    constructor(private el: ElementRef) { }

    ngOnInit() {
        console.log('directive initiated');
    }
    @HostListener('keyup', [$event]) onKeyUp(e) {
        console.log(e);
    }
}

这次出了什么问题？

【问题讨论】：

stackblitz.com/edit/angular-zldrbj
如果您仍然遇到问题，请发布您编写的指令的所有代码。信息越多越好
指令是否在与您使用它的组件相同的模块中正确声明？或者你忘了导出指令？
实际上，它是在我跨应用程序使用的共享模块上声明和导出的，该模块具有多个延迟加载模块。为了确定，我已经验证了 3 次。
如果你在正确的地方标记了指令并且用["$event"]包围了$event，你的代码就可以正常工作。请提供minimal reproducible example，最好是stackblitz。

标签： angular angular2-directives

【解决方案1】：

为按键事件制定指令：

@Directive({
  selector: "[app-key-press]"
})
export class KeyupDirective {
  @HostListener("keyup", ["$event"]) onKeyUp(event: KeyboardEvent) {
    console.log(event);
  }
}

并在输入上使用它：

<input type="text" app-key-press />

这就是你所需要的。不要使用element.nativeElement.onkeyup 绑定事件。您只需要在输入上使用指令选择器即可。

【讨论】：

感谢您的建议。我已经尝试过了，正如我在问题中提到的，它给出了以下错误。 Cannot find the name 'onKeyup'. Did you mean 'onkeyup'?
@Buu97 使用onKeyUp