アンギュラ4のEventListenersを削除するには

Question

ホイールイベントリスナーは、直ちに削除する必要があります。私は以下を試みたが、イベントリスナーを削除しなかった。

export class HomeComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
     document.querySelector("#section-one").addEventListener("wheel",() => this.myFunction1(), true); 
    } 

    myFunction1() { 
     alert(); 
     document.querySelector("#section-one").removeEventListener("wheel", this.myFunction1, true); 
     console.log("Done!"); 
    } 
} 

いずれかの提案がありますか？

Answer 1

：

Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect.

あなたのコードが動作しないはずです。次のように

可能な修正があってもよい：wheelHandlerは

wheelHandler: any; 

ngOnInit() { 
    this.wheelHandler = this.myFunction1.bind(this); 
    document.querySelector("#section-one").addEventListener("wheel", this.wheelHandler, true); 
} 

myFunction1() { 
    alert(); 
    document.querySelector("#section-one").removeEventListener("wheel", this.wheelHandler, true); 
    console.log("Done!"); 
} 

をより角度方法溶液のハンドラ

の同じインスタンスを参照する機能が参照

• How to listen for mousemove event on Document object in Angular

しかし、AFAIK useCaptureパラメータはまだサポートされていません。常にそうですfalse

Answer 2

クラスメソッドをコールバック関数として使用すると、thisはコールバック関数のクラスを指していない可能性があります。

は、イベントリスナーを追加する代わりに、このコードを使用します。this.myFunction1が() => this.myFunction1()なったこと

document.querySelector("#section-one") 
    .addEventListener("wheel",() => this.myFunction1(), true); 

注意。言い換えれば、私はラムダの中でコールバック関数の名前をラップしました。最後に

document.querySelector("#section-one").removeEventListener("wheel", this. myFunction1, true); 

を、そして最も重要なのは、なぜあなたはそのようなイベントリスナーを使用している：

リスナーを削除するコードは同じまま？これは間違いなく角度の方法ではありません。 the docsによると

Answer 3

HostListenerデコレータを使用してイベントリスナーをバインドできますが、これはホスト要素に対してのみ有効です。子要素のリスナーを追加および削除する場合は、Renderer2.listenメソッドを使用する必要があります。これは、イベントリスナーを削除する関数を返します。

@Component({ 
    template: '<div #sectionOne></div>' 
}) 
export class myComponent { 
    private _listeners = []; 

    @ViewChild('sectionOne') 
    public section: ElementRef<any>; 

    constructor(private _renderer: Renderer2) {} 

    ngAfterViewInit() { 
    this._listeners.push(
     this._renderer.listen(this.section.nativeElement, 'click', this.handler.bind(this)) 
    ); 
    } 

    ngOnDestroy() { 
    this._listeners.forEach(fn => fn()); 
    } 

    public handler() { 
    } 
} 

The useCapture parameter isn't supported by angular by now. For more information, see this issue .