angular + Ionic 2 + ngrx/store - 退订无效

Question

我有一个实现了 ngrx/store 的 ionic2 应用程序，但我遇到了一个奇怪的行为。

nav:Subscription;

ngOnInit(): void {
    this.nav = this.store.select(fromRoot.getLoginState).subscribe(res => {
        if(res){
            this.navCtrl.setRoot(TabsPage);
        }
    })
}

ngOnDestroy(): void {
    this.nav.unsubscribe()
}

store.select(fromRoot.getLoginState) returns 一个布尔值，如果它是真的，我想在 Ionic 2 中将 TabsPage 设置为根。显然我只希望它发生一次所以我在 onDestroy 生命周期挂钩中取消订阅。

然而，取消订阅似乎不起作用，每次我获得状态更改时，它都会将视图设置回 Tabspage（因此订阅仍然会触发）

有什么想法吗？

干杯

Answer 1

您应该在订阅中取消订阅

this.nav = this.store.select(fromRoot.getLoginState).subscribe(res => {
        if(res){
            this.navCtrl.setRoot(TabsPage);
        }
        //condition to check the required data is available 
         this.nav.unsubscribe();
}

Answer 2

ngrx 使用 rxjs Observables，当你不在乎是否能够时，它可以很容易地转换为 Promises 来接收像这样的单个值在收到结果之前取消订阅。

如果您真的只想要一个值并且不会监视商店的登录状态更新，那么 Observable.toPromise 比搞乱订阅更容易，并且使代码的意图更清晰恕我直言。

这是您使用 toPromise 的示例：

// notice no assignment here, since no need to unsubscribe
this.store.select(fromRoot.getLoginState).toPromise()
    .then(res => res && this.navCtrl.setRoot(TabsPage));

angular + Ionic 2 + ngrx/store - 退订无效

angular + Ionic 2 + ngrx/store - unsubscribe doesn't work

observable

rxjs

ionic2

angular

ngrx-store