取消订阅不是可观察的函数

问题描述

我正在创建一个拖放应用程序，并且创建了一个可观察到的鼠标位置，用于重新放置我的drag-object.

I'm making a drag and drop application and I have created an observable to the mouse position, that repositions my 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';
      }
  });

通过这种实施方式，我可以毫无问题地订阅:

With this implementation I have no problem subscribing in this way:

this.mouseMove$.subscribe();

但是我似乎都无法退订:

however I cannot seem to unsubscribe by either:

this.mouseMove$.unsubscribe();

或

this.mouseMove$.dispose();

无论哪种情况，我都会遇到以下类型的错误:

in either case I get the following type of error:

我不确定这是否与any的mouseMove$类型有关，但是将类型设置为Observable和Observable<MouseEvent>无效.我在这里不明白什么?

I'm not sure if this has to do with the mouseMove$ type of any, but setting the type as Observable and Observable<MouseEvent> did not work. What am I not understanding here?

推荐答案

您可能正在使用RxJS的较新版本，其中发生了API更改，其中Observable.subscribe返回了Disposable，您从中调用(在RxJS5中dispose变成了unsubscribe).不幸的是，仍然有许多旧的教程和博客文章以旧方法"进行，导致这种混乱.

You're probably using a newer version of RxJS, where there has been an API change where Observable.subscribe returns a Disposable, from which you call .unsubscribe now (dispose became unsubscribe in RxJS5). Unfortunately there are still lots of old tutorials and blog posts out there doing it "the old way", resulting in this confusion.

因此，您的代码应该是

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

完成后

disposeMe.unsubscribe();

有关从版本4到版本5的API更改的完整列表，请检查此文件.

For a full list of API changes from Version 4 to 5, check this file.

这篇关于取消订阅不是可观察的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！