angular - 如何在 Angular 中监听 Document 对象上的 mousemove 事件

Question

我正在将拖动功能实现到 Angular 应用程序中:http://jsfiddle.net/Jjgmz/1/

其中一部分是监听文档对象上的 mousemove 事件。

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

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

假设这是 component.html 文件的内容:

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

我正在使用 Angular 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 ) 是一个较低级别的解决方案；当您不想用方法使代码困惑，而是想在其他地方处理它们时很有用，例如在钩子(Hook)中，如以下代码片段所示。但是要小心，因为您仍然需要删除事件监听器以防止内存泄漏；要么在您知道不再需要它时执行此操作，要么在 OnDestroy Hook 中执行此操作。

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) 第一个示例的替代方案是 host 属性，Angular Style Guide 不鼓励这样做，因为您现在在物理上相距很远的两个地方跟踪函数名称在代码中。尽可能选择第一个版本。

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

5) Angular 采用的一种 react 方式是使用 Observable.fromEvent。这使您受益于所有 RxJS operators用于在执行函数之前转换流。不过要小心，因为您需要手动取消订阅以避免内存泄漏(除非您使用 async 管道直接在模板中订阅；这将为您处理取消订阅)。也不要忘记添加-导入运算符，如以下代码片段所示。

import { Subscription, fromEvent } from 'rxjs';

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

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

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

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