在Angular 2中dynamic添加事件监听器
早晨，我刚刚开始乱糟糟的Angular 2，我不知道是否有人可以告诉我dynamic添加和删除元素的事件监听器的最佳方式。
我有一个组件设置。 当单击模板中的某个元素时，我想要将mousemove的侦听器添加到同一个模板的另一个元素。 然后我想要删除这个监听器，当第三个元素被点击。
我有种工作只是使用简单的Javascript抓住元素，然后调用标准的addEventListener()但我想知道是否有更多的“ Angular2.0 ”这样做，我应该看看的方式。
欢呼任何build议:)
渲染器已在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' });
请注意，由于listenGlobal listen和listenGlobal返回一个函数来删除监听器（请参阅listenGlobal changelog的中断更改部分）。 这是为了避免大应用程序中的内存泄漏（请参阅＃6686 ）。
因此，要删除我们dynamic添加的监听器，我们必须将listen或listenGlobal分配给一个将返回的函数的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 。 这个例子包含了listen和listenGlobal的用法。
使用RendererV2和Angular 4.0.0-rc.1 + （从4.0.0-rc.3开始，Renderer2）
-
25/02/2017 ：
Renderer已被弃用，现在我们应该使用RendererV2 -
10/03/2017 ：
RendererV2更名为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
