web-dev-qa-db-fra.com

le désabonnement n'est pas une fonction sur un observable

Je fais une application glisser-déposer et j'ai créé un observable à la position de la souris, qui repositionne mon 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';
      }
  });

Avec cette implémentation, je n'ai aucun problème à m'abonner de cette façon:

this.mouseMove$.subscribe();

cependant, je ne peux pas sembler me désinscrire non plus:

this.mouseMove$.unsubscribe();

ou

this.mouseMove$.dispose();

dans les deux cas, j'obtiens le type d'erreur suivant:

TypeError: this.mouseMove $ .unsubscribe n'est pas une fonction ...

Je ne sais pas si cela a à voir avec le mouseMove$ type de any, mais en définissant le type sur Observable et Observable<MouseEvent> n'a pas fonctionné. Qu'est-ce que je ne comprends pas ici?

angulartypescriptobservableunsubscribe
17
Nate May

Vous utilisez probablement une version plus récente de RxJS, où il y a eu un changement d'API où Observable.subscribe renvoie un Disposable, à partir duquel vous appelez .unsubscribe maintenant (dispose est devenu unsubscribe dans RxJS5). Malheureusement, il existe encore de nombreux anciens tutoriels et articles de blog qui le font "à l'ancienne", ce qui entraîne cette confusion.

Ainsi, votre code devrait être

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

et, une fois que vous avez terminé

disposeMe.unsubscribe();

Pour une liste complète des modifications de l'API de la version 4 à la version 5, consultez ce fichier .

30
Georg Grab

assurez-vous que votre this.mouseMove$ est une première observable:

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

probablement dans votre cas, vous vous désabonnez avant this.mouseMove$ n'a encore reçu aucune valeur.

4
Bo Chen