Angular6中监听DOM元素事件

背景：

由于使用原生addEventListener方法会导致this指向有问题，并且无法移除事件监听，导致事件多次绑定，影响性能，而es6中都是箭头函数,所以ng6中可以使用使用rxjs

一、package.json

node版本：8.10.0

 

angular版本：6.0.7

 

rxjs版本：6.2.1

 

二、代码实现

 1 import { fromEvent } from 'rxjs';
 2 
 3 // 绑定页面点击事件
 4 monitorClick() {
 5     this.$pageClick = fromEvent(document, 'click').subscribe(() => {
 6       //
 7     });
 8  }
 9 
10 // 移除页面点击事件
11 removeClick() {
12     if (this.$pageClick) {
13       this.$pageClick.unsubscribe();
14     }
15 }