コンストラクタの外側にあるAngular 2のドキュメントリスナの追加と削除

Question

テンプレートを移動可能なポップアップコンポーネントがあります。 open()メソッドが呼び出され、可動リスナーが接続されているときにポップアップが開きます。 close()メソッドが呼び出されたが、リスナーが削除されていない場合は閉じます。これらはクラスレベルにあります：

@Output() 
open() { 
    const div = this.someDiv.nativeElement; 
    div.addEventListener('mousedown', this.move.mouseDown.bind(this), false); 
    div.addEventListener('touchstart', this.move.touchStart.bind(this), false); 
    document.addEventListener('mousemove', this.move.mouseMove.bind(this), false); 
    document.addEventListener('touchmove', this.move.touchMove.bind(this), false); 
    document.addEventListener('mouseup', this.move.mouseUp.bind(this), false); 
    document.addEventListener('touchEnd', this.move.touchEnd.bind(this), false); 
    this.display = 'block'; 
} 

@Output() 
close() { 
    const div = this.someDiv.nativeElement; 
    div.removeEventListener('mousedown', this.move.mouseDown.bind(this), false); 
    div.removeEventListener('touchstart', this.move.touchStart.bind(this), false); 
    document.removeEventListener('mousemove', this.move.mouseMove.bind(this), false); 
    document.removeEventListener('touchmove', this.move.touchMove.bind(this), false); 
    document.removeEventListener('mouseup', this.move.mouseUp.bind(this), false); 
    document.removeEventListener('touchEnd', this.move.touchEnd.bind(this), false); 
    this.display = 'none'; 
} 

素晴らしいです。ただし、同じ関数を参照しようとしているにもかかわらず、リスナーを削除しても機能しません。このコンテキストでリスナーを削除するにはどうすればよいですか？

P.S.私は確かに知っているのに役立つだろうドキュメントイベントを登録するためのより良い方法があると確信しています。

Answer 1

新たに書き直したアプローチではAngularメソッドを使用することができますが、ここでの問題は、ネイティブJavaScript .bind()プロトタイプメソッドの使用にあります。 bindを使用して

バインド（）メソッドは、新しい関数を作成します...つまりFunction.prototype.bind()

は、「あなたのことを意味thisコンテキスト—を提供することの利点と匿名関数を使用してのようなものです元のオブジェクトを参照するのではなく、新しく作成された関数を参照します。だから私は明示的に同じオブジェクトを指しているので、リスナーを削除することができると思ったが、bindを使用するときは、関連するオブジェクトへの参照を作成して先にバインドしてから、先行参照を指す：

private moveMD = this.move.mouseDown.bind(this); 
private moveTS = this.move.touchStart.bind(this); 
private moveMM = this.move.mouseMove.bind(this); 
private moveTM = this.move.touchMove.bind(this); 
private moveMU = this.move.mouseUp.bind(this); 
private moveTE = this.move.touchEnd.bind(this); 

@Output() 
open() { 
    const div = this.someDiv.nativeElement; 
    div.addEventListener('mousedown', this.moveMD, false); 
    div.addEventListener('touchstart', this.moveTS, false); 
    document.addEventListener('mousemove', this.moveMM, false); 
    document.addEventListener('touchmove', this.moveTM, false); 
    document.addEventListener('mouseup', this.moveMU, false); 
    document.addEventListener('touchEnd', this.moveTE, false); 
    this.display = 'block'; 
} 

@Output() 
close() { 
    const div = this.someDiv.nativeElement; 
    div.removeEventListener('mousedown', this.moveMD, false); 
    div.removeEventListener('touchstart', this.moveTS, false); 
    document.removeEventListener('mousemove', this.moveMM, false); 
    document.removeEventListener('touchmove', this.moveTM, false); 
    document.removeEventListener('mouseup', this.moveMU, false); 
    document.removeEventListener('touchEnd', this.moveTE, false); 
    this.display = 'none'; 
}