Angular 指令,无法将事件侦听器附加到元素
Angular Directive, cannot attach event listener to element
我尝试将 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);
}
}
这次有什么问题吗?
为按键事件设置指令:
@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
绑定事件。您只需要在输入上使用指令选择器即可。
我尝试将 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);
}
}
这次有什么问题吗?
为按键事件设置指令:
@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
绑定事件。您只需要在输入上使用指令选择器即可。