Angular 侦听特定HTML元素上的事件

我试图找出如何在angular2中的特定元素上收听特定事件

HTML

---

不确定在Angular2中实现这一点的正确方法是什么，希望有人能给出答案。

有几种方法可以实现这一点：

指令

您可以创建一个将应用于webcomponent/component的指令，然后使用@HostListener对事件做出反应。以下是一个例子：

@Directive({
    selector: '[highlight]'
})

class HighlightDirective {
    constructor(private _element: ElementRef) {
    }

    @HostListener('click') onClick() {
        this.highlightConfig = {
            color: 'green'
        };

        this._element.nativeElement.style.backgroundColor =
            this._element.nativeElement.style.backgroundColor ? null : this.highlightConfig.color;
    }

}

然后将其应用于组件：

<div highlight>here</div>

事件

您还可以在组件上应用默认/自定义事件：

<div (click)="myFunc()">Here</div>

---

如果不使用指令呢？是的，正如我所说的，您可以简单地使用事件。对于wheel，您有wheel='myFunc'。

<div highlight>here</div>

@HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    // my code
}

<div (click)="myFunc()">Here</div>