取消订阅不是可观察的功能

时间:2016-12-16 19:17:08

标签: angular typescript observable unsubscribe

我正在制作一个拖放应用程序,并且我创建了一个可观察鼠标位置,重新定位我的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不是函数...

我不确定这是否与mouseMove$ any类型有关,但将类型设置为ObservableObservable<MouseEvent>不起作用。我在这里不理解什么?

4 个答案:

答案 0 :(得分:26)

您可能正在使用较新版本的RxJS,其中Observable.subscribe返回Disposable时发生了API更改,您现在可以从中调用.unsubscribe({{ 1}}在RxJS5中成为dispose。不幸的是,仍然有许多旧的教程和博客文章在那里做着#34;旧的方式&#34;,导致这种混乱。

因此,您的代码应该是

unsubscribe

并且,在您完成

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

有关从版本4到5的API更改的完整列表,请选中this file

答案 1 :(得分:4)

确保您的this.mouseMove$首先是可观察的:

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

可能在您的情况下,您在this.mouseMove$尚未分配任何值之前取消订阅。

答案 2 :(得分:0)

  this.getValue= this.ntUser.salesEnquiry()
      .subscribe(
        (result) => {
    // some action
          this.getdataapi.unsubscribe();
        },
        (error) => {
          // some action
        }
      );
  }

答案 3 :(得分:-2)

看看brianflove.com

通过设置mouseMove $:ISubscription,应该注意这个问题。