angular - 动态添加事件监听器

Question

我刚开始弄乱 Angular 2，我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法。

我有一个组件设置。单击模板中的某个元素时，我想将 mousemove 的监听器添加到同一模板的另一个元素。然后我想在单击第三个元素时删除此监听器。

我只是使用普通的 Javascript 获取元素然后调用标准的 addEventListener() 来让这个工作正常，但我想知道是否有更多的“Angular2.0”我应该研究的这样做的方式。

Answer 1

渲染器在 Angular 4.0.0-rc.1 中已被弃用，请阅读下面的更新

angular2 方式 是使用来自 Renderer 的 listen 或 listenGlobal

例如，如果您想向组件添加点击事件，则必须使用 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 来访问 document、body 等

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

请注意，自 beta.2 以来，listen 和 listenGlobal 都返回一个函数来删除监听器(请参阅 beta.2 更新日志中的 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, '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举个例子。该示例包含 listen 和 listenGlobal 的用法。

在 Angular 4.0.0-rc.1+ 中使用 RendererV2 ^{_{(Renderer2 since 4.0.0-rc.3)}}

• 25/02/2017:Renderer 已被弃用，现在我们应该使用 RendererV2 (见下行)。查看commit .

• 10/03/2017:RendererV2 已重命名为 Renderer2。查看breaking changes .

RendererV2不再有用于全局事件(文档、正文、窗口)的 listenGlobal 函数。它只有一个 listen 函数来实现这两种功能。

作为引用，我复制并粘贴了 source code DOM 渲染器实现，因为它可能会改变(是的，它是 Angular !)。

listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
      () => void {
    if (typeof target === 'string') {
      return <() => void>this.eventManager.addGlobalEventListener(
          target, event, decoratePreventDefault(callback));
    }
    return <() => void>this.eventManager.addEventListener(
               target, event, decoratePreventDefault(callback)) as() => void;
  }

如您所见，现在它会验证我们是否正在传递字符串(文档、正文或窗口)，在这种情况下，它将使用内部 addGlobalEventListener 函数。在任何其他情况下，当我们传递一个元素 (nativeElement) 时，它将使用一个简单的 addEventListener

要删除监听器，它与 Angular 2.x 中的 Renderer 相同。 listen 返回一个函数，然后调用该函数。

例子

// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

// Remove listeners
global();
simple();

plnkr使用 Angular 4.0.0-rc.1 使用 RendererV2

plnkr使用 Angular 4.0.0-rc.3 使用 Renderer2