如何监听在角

Question

我实现拖动功能集成到一个角度应用文档对象的鼠标移动事件：http://jsfiddle.net/Jjgmz/1/

部分的它，是听为一个文件对象mousemove事件。

$(document).mousemove(function(e) {}); 

如何侦听组件内部的文档对象？

让我们假装这是component.html文件的内容：

<div id="box"></div> 

我采用了棱角分明4.

Answer 1

1）使用@HostListener（docs）。这是大多数时候应该足够的首选方法。

import {Component, NgModule, HostListener} from '@angular/core' 

@Component({ 
    ... 
}) 
export class MyComponent { 
    @HostListener('document:mousemove', ['$event']) 
    onMouseMove(e) { 
    console.log(e); 
    } 
    .. 
} 

2）与上文相似，也可以任何DOM元素上使用(document:event)="handler"，但上述的解决方案是首选，因为代码是清洁器。通过使用它，从类中不会立即明白您拥有全局事件侦听器，并且您可能会不必要地添加其他事件。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (document:mousemove)="onMouseMove($event)" id="box"></div> 
    `, 
}) 
export class MyComponent { 
    onMouseMove(e) { 
    console.log(e); 
    } 
} 

3）Renderer（docs）是一种较低级的溶液;当你不想用方法混淆你的代码时很有用，但是在其他地方也可以处理，比如在钩子中，如下面的代码片段所示。但要小心，因为您仍然需要移除事件侦听器以防止内存泄漏;要么当你知道你不再需要它时，或者在OnDestroy钩子中这样做。

import { Component, Renderer2 } from '@angular/core'; 

@Component({ 
    ... 
}) 
export class MyComponent { 
    globalListenFunc: Function; 

    constructor(private renderer: Renderer2) {} 

    ngOnInit() { 
    this.globalListenFunc = this.renderer.listen('document', 'mousemove', e => { 
     console.log(e); 
    }); 
    } 

    ngOnDestroy() { 
    // remove listener 
    this.globalListenFunc(); 
    } 
} 

4）第一个例子中的替代方案是主机属性，这是由角风格指南气馁，因为你现在跟踪的函数名在两个地方可以是相距甚远的身体在码。尽可能地选择第一个版本。

@Component({ 
    ... 
    host: { 
    '(document:mousemove)': 'onMouseMove($event)' 
    } 
}) 
export class MyComponent { 
    onMouseMove(e) { 
    console.log(e); 
    } 
} 

5）的反应性的方法，其中角拥抱，使用Observable.fromEvent。这使您在执行函数之前转换流的所有RxJS operators的好处。但是，要小心，因为您需要手动取消订阅以避免内存泄漏（除非您使用async管道直接在模板中订阅;这将为您处理取消订阅）。另外不要忘记添加 - 导入操作符，如下面的代码片段所示。

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    ... 
}) 
export class MyComponent { 
    subscription: Subscription; 

    ngOnInit() { 
    this.subscription = 
     Observable.fromEvent(document, 'mousemove') 
          .subscribe(e => { 
          console.log(e); 
          }); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

6）当然，document.addEventListener总是一个解决方案;但这不是Angular应用程序的预期用法;你应该选择不同的方式。直接访问DOM是不鼓励的，因为它打破了Angular对DOM操作的简洁封装。你也可能遇到Universal和SSR的问题。