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

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

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

Angular Directive, cannot attach event listener to element

angular

angular2-directives