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

問題は、その2番目のコードでは、 "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(); 
} 

のような角度の方法を使用する方が良いだろう