角度 - イベントからの登録解除ができません

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その時点で、コンポーネントから離れて移動するまでアクティブのままになります購読です。

手動でコンポーネントを残さずに加入して停止する場合は、あなたがこれを行うことができます。あなたも同じように使われているようですthis.watchPositionインスタンス変数のオーバーヘッドを削除することができ

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

注意.subscribeメソッドを掛ける足場。

編集：ボタンクリックが複数のイベントを作成していることが原因で、サブスクライブが複数回発生することが考えられます。

おそらくあなたのボタンでは、$イベントをパラメータとして含めてから、関数内のイベントに対して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') 
     }); 
    }