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）返回一个布尔值，如果是真的，我想在Ionic 2中将TabsPage设置为root。显然我只希望它发生一次，所以我在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 Observable s，当您无法关注时，可以轻松将其转换为Promise以接收单个值在收到结果之前取消订阅。

如果你真的只想要一个单一的值并且不想监控商店的登录状态更新，那么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 - 取消订阅不起作用

2 个答案: