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

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 ...

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

Answer 1

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

因此，您的代码应该是

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

然后，在你完成之后

disposeMe.unsubscribe();

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