Angular - 无法从事件取消订阅（）

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其从可观察退订干净火灾。

如果你想手动停止不留组件订阅，你可以这样做：

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') 
     }); 
    }