Question

我试图从事件中取消订阅（）;但是，它没有用，这是一个代码片段：

watchMethod(){
  this.watchPosition = this.geolocation.watchPosition().subscribe(resp => {
  let userLatLong = { "lat": resp.coords.latitude, "lng": resp.coords.longitude };
  console.log('is watching')
});
}

stopWatching(){
//on click stop watching the current user location
this.watchPosition.unsubscribe();
}

顺便说一句，我没有得到任何输出也没有错误。我在控制台上看到的唯一内容是：is watching出于某种原因，unsubscribe()无效。

有什么可能出错的想法？

Answer 1

将这些导入添加到您的组件

import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';

在你的课程中添加它 - 我通常在构造函数上面执行此操作。

  private ngUnsubscribe: Subject<any> = new Subject<any>()

添加ngOnDestroy功能

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

然后在你的.subscribe之前立即添加它（你应该在具有倍数的组件中的每个.subscribe之前使用这个确切的语法。）

  .takeUntil(this.ngUnsubscribe)

所以在你的情况下，它看起来像这样。

   watchMethod(){
     this.geolocation.watchPosition()
       .takeUntil(this.ngUnsubscribe)
       .subscribe(resp => {
           let userLatLong = { "lat": resp.coords.latitude, "lng": resp.coords.longitude };
           console.log('is watching')
      });
  }

所以会发生什么是订阅将保持活动状态，直到你离开组件为止，此时ngOnDestroy将彻底解除Observable的取消订阅。

如果您想在不离开组件的情况下手动停止订阅，可以执行以下操作：

    stopWatching(){
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
   }

请注意，您还可以删除this.watchPosition实例变量的开销，该变量似乎只是用作挂起.subscribe方法的脚手架。

编辑：我唯一能想到的是按钮点击会创建多个事件，并导致.subscribe多次触发。

也许在你的按钮中，将$ event包含为参数，然后在函数中的事件上调用stopPropagation。

<button (click)="watchMethod($event)">Watch Method </button>

并更新你的watchMethod：

   watchMethod(event){
     event.stopPropagation();
     this.geolocation.watchPosition()
       .takeUntil(this.ngUnsubscribe)
       .subscribe(resp => {
           let userLatLong = { "lat": resp.coords.latitude, "lng": resp.coords.longitude };
           console.log('is watching')
      });
  }

Angular - 无法取消订阅事件

1 个答案: