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 }