web-dev-qa-db-fra.com

Angular 2: Impossible de lire la propriété 'unsubscribe' de indéfini

J'essaie de créer un ObservableTimer qui correspond à un certain nombre. J'ai déjà une logique pour le faire, mais quand j'essaye de me désinscrire, j'obtiens un "Cannot read property 'unsubscribe' of undefined" erreur pour cela. Voici mon code

syncExpireTime() {
    let route = AppSettings.API_ENDPOINT + 'Account/ExpireTime'
    this.http.get(route, this.options).map(this.extractData).catch(this.handleError).subscribe(
        res => {this.expireTime = +res},
        error => console.log(error),
        () => this.timerSub = TimerObservable.create(0,1000)
            .takeWhile(x => x <= this.expireTime)
            .subscribe(x => x == this.expireTime ? this.logout() : console.log(x))
    )
}

Et puis voici mon code de déconnexion. J'essaie de me désinscrire du délai d'expiration lorsque je me déconnecte

logout() {
    this.timerSub.unsubscribe()
    this.router.navigate(['./login'])
}
angularrxjsobservable
6
Alex Palacios

Vous pouvez essayer de résoudre ce problème de deux manières.

logout() {
    if(this.timerSub){// this if will detect undefined issue of timersub
       this.timerSub.unsubscribe();
      } 
    this.router.navigate(['./login'])
}

ou vous pouvez essayer ngOnDestroy hook de cycle de vie de angular 2 qui est utilisé pour faire quelque chose quand nous voulons détruire notre composant

ngOnDestroy() {
    if(this.timerSub){
       this.timerSub.unsubscribe();
      } 
    this.router.navigate(['./login']); 
 }

j'espère que cela vous aidera :)

15
Amit kumar

j'avais fait face à la même exception. il vaut mieux vérifier "souscription.closed == faux", avant d'appeler le unsubscribe ().

ngOnDestroy () {

    // If this.notification has the multiple subscriptions 
    if(this.notifications && this.notifications.length >0)
    {
        this.notifications.forEach((s) => {
            if(!s.closed)    
                s.unsubscribe();
        });        
    }
    // if this.subscription has direct object
    if(this.subscription && !this.subscription.closed)
        this.subscription.unsubscribe();
}
3
babu durairaji

Vous devez appeler unsubscribe dans ngOnDestroy.

Crochets Lyfecicle

ngOnDestroy

Nettoyage juste avant Angular détruit la directive/le composant. Désabonnez les observables et détachez les gestionnaires d'événements pour éviter les fuites de mémoire.

Appelé juste avant Angular détruit la directive/le composant.

2
Roman C