typescript 取消订阅不是 observable 上的函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41191077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:05:30  来源:igfitidea点击:

unsubscribe is not a function on an observable

angulartypescriptobservableunsubscribe

提问by Nate May

I'm making a drag and drop application and I have created an observable to the mouse position, that repositions my drag-object.

我正在制作一个拖放应用程序,我已经创建了一个鼠标位置的可观察对象,它重新定位了我的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();

or

或者

this.mouseMove$.dispose();

in either case I get the following type of error:

在任何一种情况下,我都会收到以下类型的错误:

TypeError: this.mouseMove$.unsubscribe is not a function ...

类型错误:this.mouseMove$.unsubscribe 不是函数...

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

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

回答by Georg Grab

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

你可能会使用RxJS,那里一直是其中一个API的变化较新版本的Observable.subscribe回报Disposable,从中调用.unsubscribe现在(dispose成为unsubscribe在RxJS5)。不幸的是,仍然有很多旧的教程和博客文章在用“旧的方式”来做,导致了这种混乱。

Thus, your code should be

因此,您的代码应该是

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

and, after you're done

并且,在你完成之后

disposeMe.unsubscribe();

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

有关从第 4 版到第 5 版的 API 更改的完整列表,请查看此文件

回答by Bo Chen

make sure your this.mouseMove$is an observable first:

this.mouseMove$首先确保你是一个可观察的:

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

probably in your case, you unsubscribe before this.mouseMove$has not been assigned any value yet.

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

回答by Roger

Take a look at brianflove.com.

看看brianflove.com

By setting mouseMove$: ISubscription, should take care of the issue.

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