AddEventListener - 使用外部函数时未定义的方法

Question

我有一些这样的代码：

  addMarkerListener(){
    document.querySelector('body').addEventListener('click', (event) => (this.handleMarkerListenerClick(event)));
  }

  handleMarkerListenerClick(event){
    let target = event.target as HTMLElement;
    if (target.tagName.toLowerCase() == "a" && target.className.startsWith("ver-mais-unidade")){
      this.onViewUnidade();
    }
  }

它工作得很好，但我需要稍后删除该监听器，所以我必须像这样调用我的处理程序：

  addMarkerListener(){
    document.querySelector('body').addEventListener('click', this.handleMarkerListenerClick);
  }

  handleMarkerListenerClick(event){
    let target = event.target as HTMLElement;
    if (target.tagName.toLowerCase() == "a" && target.className.startsWith("ver-mais-unidade")){
      this.onViewUnidade();
    }
  }

问题是，对于第二个代码，我得到“this.onViewUnidade”未定义。onViewUnidade是我组件中的一个函数，在第一种情况下工作得很好。有人知道我做错了什么吗？谢谢！

Answer 1

尝试使用实例函数

handleMarkerListenerClick = (event) => {

或者在构造函数中：

this.handleMarkerListenerClick = this.handleMarkerListenerClick.bind(this);

但最好使用像这样的角度方式

@HostListener('document:click', ['$event'])
handleMarkerListenerClick(e) { ... }

或者

constructor(private renderer: Renderer2) {}
...
this.listenFunc = renderer.listen(document.body, 'click', (e) => {
   ...
});
...
ngOnDestroy() {
  this.listenFunc();
}