web-dev-qa-db-ja.com

購読解除はオブザーバブルの関数ではありません

ドラッグアンドドロップアプリケーションを作成しており、マウスの位置を監視するオブジェクトを作成しました。これにより、drag-objectの位置が変更されます。

mouseMove$: any;

constructor(){
  this.mouseMove$ = Observable.fromEvent(document, 'mousemove')
    .do((mouseevent: MouseEvent) => {
      if (document.getElementById("drag-object")){
        document.getElementById("drag-object").style.left = (mouseevent.clientX) + 'px';
        document.getElementById("drag-object").style.top = (mouseevent.clientY) + 'px';
      }
  });

この実装では、この方法でサブスクライブしても問題ありません。

this.mouseMove$.subscribe();

ただし、次のいずれかの方法で登録を解除することはできません。

this.mouseMove$.unsubscribe();

または

this.mouseMove$.dispose();

いずれの場合でも、次のタイプのエラーが発生します。

TypeError：this.mouseMove $ .unsubscribeは関数ではありません...

これがanyのmouseMove$タイプに関係するかどうかはわかりませんが、タイプをObservableおよびObservable<MouseEvent>に設定しても機能しませんでした。ここで何がわからないのですか？

angulartypescriptobservableunsubscribe
17
Nate May

おそらく、RxJSの新しいバージョンを使用している場合、Observable.subscribeがDisposableを返すAPIの変更があり、そこから.unsubscribeを呼び出します（dispose RxJS5でunsubscribeになりました）。残念ながら、「古い方法」でそれを行う古いチュートリアルやブログ投稿がまだたくさんあり、この混乱を招いています。

したがって、あなたのコードは

let disposeMe = this.mouseMove$.subscribe();

そして、あなたが終わった後

disposeMe.unsubscribe();

バージョン4から5へのAPI変更の完全なリストについては、 このファイル を確認してください。

30
Georg Grab

this.mouseMove$は最初に観測可能です：

if (this.mouseMove$ !== undefined) {
  this.mouseMove$.unsubscribe();
}

おそらくあなたの場合、this.mouseMove$にはまだ値が割り当てられていません。

4
Bo Chen