HostListener
一个装饰器，用于声明要监听的 DOM 事件，并提供在该事件发生时要运行的处理器方法。
Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.
| 选项 | 说明 |
|---|---|
eventName? | 要监听的事件。 The DOM event to listen for. |
args? | 当该事件发生时传给处理器方法的一组参数。 A set of arguments to pass to the handler method when the event occurs. |
说明
Angular invokes the supplied handler method when the host element emits the specified event, and updates the bound element with the result.
If the handler method returns false, applies preventDefault on the bound element.
Further information available in the Usage Notes...
使用说明
下面的例子声明了一个指令，它会为按钮附加一个 click 监听器，并统计点击次数。
The following example declares a directive that attaches a click listener to a button and counts clicks.
@Directive({selector: 'button[counting]'})
class CountClicks {
numberOfClicks = 0;
@HostListener('click', ['$event.target'])
onClick(btn) {
console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
}
}
@Component({
selector: 'app',
template: '<button counting>Increment</button>',
})
class App {}
The following example registers another DOM event handler that listens for key-press events.
import { HostListener, Component } from "@angular/core";
@Component({
selector: 'app',
template: `<h1>Hello, you have pressed keys {{counter}} number of times!</h1> Press any key to
increment the counter.
<button (click)="resetCounter()">Reset Counter</button>`
})
class AppComponent {
counter = 0;
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
this.counter++;
}
resetCounter() {
this.counter = 0;
}
}
