Question

我试图弄清楚如何在angular2中的特定元素上侦听特定事件。

HTML

<div id="hello-world">
    Just a random message
</div>

在javascript中我将其实现为：

document.getElementById("hello-world").addEventListener("mousewheel", (e) => {
console.info(e);
});

不确定在Angular2中实现此功能的正确方法，希望有人能够得到答案。

Answer 1

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

<强>指令

您可以创建一个将应用于您的web组件/组件的指令，然后，您将能够使用@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的背景颜色。正如你所看到的，@ HostListener（＆＃39;点击＆＃39;）说＆＃34;好的家伙，每当用户点击我申请的组件时，我就会做出反应并应用下面的功能＆＃34;

对于鼠标滚轮，hostlistener为：

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

<强>事件

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

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

侦听特定HTML元素的事件

1 个答案: