动态地添加角事件监听器2 [英] Dynamically add event listener in Angular 2

问题描述

上午所有，
我刚开始更动角2，我不知道是否有人能告诉我最好的方式来动态地从元素添加和删除事件侦听器。

Morning all, I am just starting to mess around with Angular 2 and I wonder if anyone can tell me the best way to dynamically add and remove event listeners from elements.

我有一个组件设置。当单击模板的某个元素我想添加一个监听鼠标移动来同一个模板的另一个要素。然后我想删除被点击第三个元素时，这种监听器。

I have a component set up. When a certain element in the template is clicked I want to add a listener for mousemove to another element of the same template. I then want to remove this listener when a third element is clicked.

我种了这个只是用普通的JavaScript抢元素，然后调用标准的addEventListener（）工作，但我想知道是否有一个更的 Angular2.0 的这样做，我应该寻找到的方式。

I kind of got this working just using plain Javascript to grab the elements and then calling the standard addEventListener() but I wondered if there was a more "Angular2.0" way of doing this that I should be looking into.

任何意见干杯：）

推荐答案

的 angular2方式的是使用听或 listenGlobal 通过渲染

例如，如果你想要一个click事件添加到一个组件，你必须使用渲染和ElementRef（这给你，以及使用ViewChild检索的选项，或任何的 nativeElement ）

For example, if you want to add a click event to a Component, you have to use Renderer and ElementRef (this gives you as well the option to use ViewChild, or anything that retrieves the nativeElement)

constructor(elementRef: ElementRef, renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
      // Do something with 'event'
    }
);

您可以使用 listenGlobal ，这将让您使用文件，体等

You can use listenGlobal that will give you access to document, body, etc.

renderer.listenGlobal('document', 'click', (event) => {
  // Do something with 'event'
});

请注意，由于beta.2既听和 listenGlobal 返回函数删除监听器（见<一HREF =htt​​ps://github.com/angular/angular/blob/master/CHANGELOG.md相对=nofollow>重大更改部分从更新日志为beta.2）。这是为了避免在大的应用程序的内存泄漏（见＃6686 ）。

Note that since beta.2 both listen and listenGlobal return a function to remove the listener (see breaking changes section from changelog for beta.2). This is to avoid memory leaks in big applications (see #6686).

所以要去除我们动态添加监听器，我们必须指定听或 listenGlobal 来一个变量，将举行函数返回，然后我们执行它。

So to remove the listener we added dynamically we must assign listen or listenGlobal to a variable that will hold the function returned, and then we execute it.

// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;

// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;

constructor(elementRef: ElementRef, renderer: Renderer) {

    // We cache the function "listen" returns
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
        // Do something with 'event'
    });
}

ngOnDestroy() {
    // We execute both functions to remove the respectives listeners

    // Removes "listen" listener
    this.listenFunc();

    // Removs "listenGlobal" listener
    this.globalListenFunc();
}

下面是一个 plnkr 用一个例子来工作。这个例子包含了使用听和 listenGlobal 。

Here's a plnkr with an example working. The example contains the usage of listen and listenGlobal.

plnkr被更新为beta.12和我改善了答案和plnkr做出更清楚如何删除监听器。

plnkr was updated to beta.12 and I improved both the answer and the plnkr to make more clear how to remove the listeners.

这篇关于动态地添加角事件监听器2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！