在Angular 2中dynamic添加事件监听器

早晨,我刚刚开始乱糟糟的Angular 2,我不知道是否有人可以告诉我dynamic添加和删除元素的事件监听器的最佳方式。

我有一个组件设置。 当单击模板中的某个元素时,我想要将mousemove的侦听器添加到同一个模板的另一个元素。 然后我想要删除这个监听器,当第三个元素被点击。

我有种工作只是使用简单的Javascript抓住元素,然后调用标准的addEventListener()但我想知道是否有更多的“ Angular2.0 ”这样做,我应该看看的方式。

欢呼任何build议:)

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

angular2方法是使用来自Renderer的 listenlistenGlobal

例如,如果要将单击事件添加到组件,则必须使用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来让你访问documentbody

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

请注意,由于listenGlobal listenlistenGlobal返回一个函数来删除监听器(请参阅listenGlobal changelog的中断更改部分)。 这是为了避免大应用程序中的内存泄漏(请参阅#6686 )。

因此,要删除我们dynamic添加的监听器,我们必须将listenlistenGlobal分配给一个将返回的函数的variables,然后执行它。

 // 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 。 这个例子包含了listenlistenGlobal的用法。

使用RendererV2和Angular 4.0.0-rc.1 + (从4.0.0-rc.3开始,Renderer2)

  • 25/02/2017Renderer已被弃用,现在我们应该使用RendererV2 (见下面的行)。 看到提交 。

  • 10/03/2017RendererV2更名为Renderer2 。 看到突破性的变化 。

RendererV2对全局事件(文档,主体,窗口)没有更多的listenGlobalfunction。 它只具有实现两种function的listenfunction。

作为参考,我复制并粘贴DOM Renderer实现的源代码 ,因为它可能会改变(是的,它是有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; } 

正如你所看到的,现在它validation是否传递一个string(文档,正文或窗口),在这种情况下,它将使用一个内部的addGlobalEventListener函数。 在任何其他情况下,当我们传递一个元素(nativeElement)时,它将使用一个简单的addEventListener

要删除监听Renderer ,它与使用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与使用RendererV2的 Angular 4.0.0-rc.1

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