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

Question

我正在制作一个拖放应用程序，我创建了一个鼠标位置的可观察对象，它重新定位了我的 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 is not a function ...

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

Answer 1

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

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

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

Answer 2

您可能正在使用较新版本的 RxJS，其中有一个 API 更改 Observable.subscribe returns 和 Disposable，您可以从中调用 .unsubscribe 现在（dispose 在 RxJS5 中变成了 unsubscribe）。不幸的是，仍然有很多旧教程和博客文章在做这件事"the old way"，导致了这种混乱。

因此，您的代码应该是

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

完成后

disposeMe.unsubscribe();

有关从版本 4 到 5 的 API 更改的完整列表，请查看 this file。

Answer 3

看看brianflove.com。

通过设置 mouseMove$: ISubscription，应该可以解决这个问题。

Answer 4

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

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

unsubscribe is not a function on an observable

unsubscribe

observable

typescript

angular