的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

使用instance function

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(); 
}