subscription.subscribe et désabonnement n'est pas une fonction

Question

Je suis en train de résilier votre abonnement à un Observable et je vois l'erreur suivante:

[ts] Property 'unsubscribe' does not exist on type 'Observable<number>'. Did you mean 'subscribe'? 

Cette erreur est liée au code: this.subscription.unsubscribe();

Voici le fichier entier:

import { Component, Input, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { IntervalObservable } from 'rxjs/observable/IntervalObservable'; 

import 'rxjs/add/observable/interval'; 
import 'rxjs/add/observable/timer'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'] 
}) 

export class AppComponent implements OnInit { 
    public counting: boolean; 
    public triggerBtnText = 'GO!'; 
    public subscription: Observable<number>; 

    @Input() count = 0; 

    constructor() {} 

    ngOnInit() { 
    this.counting = false; 
    } 

    toggleStopwatch(): any { 
    if (this.counting === false) { 
     this.counting = true; 
     this.triggerBtnText = 'STOP'; 
     this.updateCount() 
    } else { 
     this.counting = false; 
     this.triggerBtnText = 'GO!'; 
     this.subscription.unsubscribe(); 
    } 
    } 

    updateCount() { 
    this.subscription = Observable.interval(1000); 
    this.subscription.subscribe(this.counter); 
    } 

    public counter(value) { 
    this.count = value; 
    console.log(value); 
    } 

    resetCount() { 
    this.count = 0; 
    } 

} 

ici un projet simple où il peut être teste d:https://bitbucket.org/wtkd/learning-rxjs/branch/moving-to-ng

Answer 1

Afin de faire en sorte que vous puissiez vous réabonner plus tard, mais aussi arrêter d'écouter sur l'observable, vous pouvez utiliser une fonction différente sur observables appelé takeWhile. Vous passez un prédicat qui renvoie un booléen (() => { return true || false; }) à la fonction takeWhile, et s'il renvoie true, il continue à écouter. Votre variable counting fonctionnera merveilleusement avec ceci. Voir le code ci-dessous pour un exemple de travail:

code suggéré:

this.subscription 
.takeWhile(() => {  // by calling takeWhile and passing in a predicate, 
    return this.counting; // you can have the subscription stop when the counting 
})      // variable is false. 
.subscribe((value) => { 
    this.counter = value; 
}); 

Assurez-vous également de supprimer l'appel .unsubscribe() dans votre fonction toggleStopwatch()!

Mis à jour pour refléter les changements de question, voir les révisions de la réponse originale.