unsubscribe 不是 observable 上的函数答案

【问题标题】：unsubscribe is not a function on an observableunsubscribe 不是 observable 上的函数
【发布时间】：2017-05-02 15:28:21
【问题描述】：

我正在制作一个拖放应用程序，并创建了一个可观察到鼠标位置的可观察对象，它重新定位了我的 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> 不起作用。我在这里不明白什么？

【问题讨论】：

标签： angular typescript observable unsubscribe

【解决方案1】：

您可能正在使用较新版本的 RxJS，其中有一个 API 更改，其中 Observable.subscribe 返回一个 Disposable，您现在从中调用 .unsubscribe（dispose 在 RxJS5 中变为 unsubscribe） .不幸的是，仍然有很多旧教程和博客文章以“旧方式”进行操作，导致了这种混乱。

因此，您的代码应该是

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

完成后

disposeMe.unsubscribe();

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

【讨论】：

【解决方案2】：

确保您的 this.mouseMove$ 是可观察的第一：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

请解释 OP 面临问题的原因以及您的答案如何解决它。

【解决方案4】：

看看brianflove.com。

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

【讨论】：

你能用核心描述修改答案吗？
不使用“mouseMove$:any”，将数据类型声明为 ISubscription，将消除您看到的错误。