无法读取 Angular 2 中未定义的属性“取消订阅”

Question

我正在尝试创建一个

ObservableTimer

，它会上升到一定的数字。我已经有了这样做的逻辑，但是当我尝试取消订阅时，我收到了

"Cannot read property 'unsubscribe' of undefined"

错误。

这是我的代码：

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

然后，这是我的注销代码。当我注销时，我试图取消订阅过期计时器

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

Answer 1

您可以尝试通过两种方法解决此问题。

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

或者你可以尝试 Angular 2 的 ngOnDestroy 生命周期钩子，它用于在我们想要销毁组件时执行操作

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

我希望这会有所帮助:)

Answer 2

我也遇到过同样的例外。在调用 unsubscribe() 之前，最好检查“subscription.close == false”。

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

Answer 3

您应该在

unsubscribe

中致电

ngOnDestroy

。

Lyfecicle 挂钩

ngOnDestroy

在 Angular 销毁指令/组件之前进行清理。 取消订阅可观察对象并分离事件处理程序以避免内存 泄漏。

在 Angular 销毁指令/组件之前调用。

Answer 4

提醒一下，这个错误也发生在我身上，但问题有点不同。我试图

unsubscribe

订阅，这已经通过

takeUntil

rxjs 操作员完成了。

这是糟糕的设计：

// unsubscribe = new Subject<void>(); 
const subsc = this.service.get().pipe(takeUntil(this.unsubscribe$)).subscribe((value) => {});

使用 takeUntil 或变量来销毁订阅。

当

ngOnDestroy

钩上有以下情况时，可能会发生这种情况：

this.unsubscribe$.next();
this.unsubscribe$.complete(); // these are allright

所以当你想使用

variable?.unsubscribe()

时，就放开

takeUntil()

。