模板语法
服务端渲染
API / @angular/core

HostListener

Binds a CSS event to a host listener and supplies configuration metadata. 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.

把一个事件绑定到一个宿主监听器，并提供配置元数据。 当宿主元素发出特定的事件时，Angular 就会执行所提供的处理器方法，并使用其结果更新所绑定到的元素。 如果该事件处理器返回 false，则在所绑定的元素上执行 preventDefault。

选项说明
eventName

The CSS event to listen for.

要监听的事件。

args

A set of arguments to pass to the handler method when the event occurs.

当该事件发生时传给处理器方法的一组事件。

选项

eventName

The CSS event to listen for.

要监听的事件。

eventName: string

args

A set of arguments to pass to the handler method when the event occurs.

当该事件发生时传给处理器方法的一组事件。

args: string[]

使用说明

The following example declares a directive that attaches a click listener to a button and counts clicks.

下面的例子声明了一个指令，它会为按钮附加一个 click 监听器，并统计点击次数。

@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 {}