Angular Directive，无法将事件侦听器附加到元素

Question

我尝试将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);
}
}

这次出了什么问题？

Answer 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绑定事件。您所需要的只是在输入上使用指令选择器。