【问题标题】：How to properly add document.addEventListener to Angular2?如何正确地将 document.addEventListener 添加到 Angular2？
【发布时间】：2016-10-26 06:29:42
【问题描述】：

我遇到了cordova RemoteControl plugin，要监听它的事件，需要注册 addEventListener。

//listen for the event
document.addEventListener("remote-event", function(event) {
//do something
});

我这样做是否合适？

【问题讨论】：

我想你可以像这样使用HostListener stackoverflow.com/questions/36349362/how-to-use-hostlistener
你能帮忙提供答案吗？
你找到解决办法了吗？

标签： angular

【解决方案1】：

尝试以下步骤以使用角度 2 添加事件侦听器。我不确定“远程事件”事件，但“单击”事件对我来说工作正常，如下所示。

import { ElementRef, Renderer } from '@angular/core';

constructor(public el: ElementRef, public renderer: Renderer) { 
   renderer.listenGlobal('document', 'click', (event) => {
     // Do something with 'event'
   });
}

更新

根据@paqogomez 下面的评论。

Renderer 已重命名为 Renderer2，listenGlobal 已重命名为 listen。

【讨论】：

Renderer 已重命名为 Renderer2 和 listenGlobal 已重命名为 listen
感谢您的澄清。事件它适用于动态 innerHtml 内容:)
我们是否需要在“ngOnDestroy”时手动“取消监听”事件？如果有，怎么做？

【解决方案2】：

这对我来说就像魔术一样工作

 document.querySelector('#videostop').addEventListener('click', () => {
            //function here 
            console.log('your result');
         });

【讨论】：

【解决方案3】：

您可以将 EventListener 添加到构造函数中

constructor() {
    document.addEventListener("remote-event", function(event) {
       //do something
    },false);
}

【讨论】：

【解决方案4】：

您可以使用@HostListener 这是更好的解决方案 https://juristr.com/blog/2016/09/ng2-event-registration-document/ 如果您想将 document.someMethod 用于 Angular 应用程序，您也可以在构造函数中注入文档：

import { DOCUMENT } from '@angular/common'; 
@Inject(DOCUMENT) private _document: any

【讨论】：

【解决方案5】：

我更喜欢使用@HostListener:

@HostListener('document:remote-event', ['$event'])
onDocumentRemoteEvent(ev: any) {
    // handle the event here
}

【讨论】：