angular2 – 在Angular 2中动态添加事件侦听器

例如，如果要向组件添加一个单击事件，则必须使用Renderer和ElementRef(这也为您提供了使用ViewChild或检索nativeElement的任何选项)

constructor(elementRef: ElementRef,renderer: Renderer) {

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

你可以使用listenGlobal，让你访问文档，正文等。

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

注意，因为beta.2都listen和listenGlobal返回一个函数来删除侦听器(见beta001的changelog中的breaking changes部分)。这是为了避免大型应用程序中的内存泄漏(参见#6686)。

所以要删除我们动态添加的侦听器，我们必须将listen或listenGlobal赋值给一个将保存函数的变量，然后执行它。

// 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,(event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document',(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。该示例包含listen和listenGlobal的用法。

更新

plnkr更新到beta.12和我改进的答案和plnkr，以更清楚如何删除侦听器。