在离子选项卡和清除导航堆栈之间导航

Question

我的应用有三个标签：

• TAB1
• TAB2
• TAB3

在Tab2上，用户已完成订单。此时，我想清除Tab2的导航堆栈，我想将用户导航到通常位于Tab3下的页面。

目前，这就是我所拥有的：

this.navCtrl.popToRoot();
this.navCtrl.parent.select(TabsPage.Tab3);
this.navCtrl.push(OrderStatusPage);

TabsPage.Tab3是Tab3的索引。

我弹出root的原因是尝试清除导航堆栈中的页面，以便用户稍后返回此选项卡时，我希望它们返回到该堆栈的根页面。

然后，我按照Ionic的Tab文档建议我可以通过调用this.navCtrl.parent.select来更改标签。

最后，我尝试将OrderStatusPage推送到堆栈上。

以下是我运行时会发生什么：

1. 当应用程序弹出到root时，它似乎清除了导航堆栈，但是在控制台中我可以看到它命中了我的登录页面，这不在Tabs导航堆栈上，所以我没有＆＃39 ;了解这是怎么发生的。我也不喜欢它导航到root的方式。在没有将用户移离页面的情况下，是否有某种方法可以清除堆栈？
2. 页面然后成功导航到我的Tab3页面，但是将OrderStatusPage推送到堆栈的命令似乎没有注册。

有什么想法吗？

Answer 1

每个选项卡都有自己的navCtrl，因此当您切换到Tab3时，需要将OrderStatusPage推送到Tab3的navCtrl，但您似乎使用相同的this.navCtrl。

对于问题2，您没有看到this.navCtrl.push(OrderStatusPage)结果，因为您切换到了tab3，但仍在推进tab2的navCtrl！

对于问题1，您没有提到完整的页面结构，但我猜您的三个标签页显示在登录页面的顶部。

您可以将每个标签页的navCtrl放入服务或全局变量中，如所讨论的方法here（下：将每个标签页推入堆栈），然后推送/使用该服务弹出它们。

此外，作为附注，如果您将用户从一个步骤转到另一个步骤，您还可以使用ionic slides而不是标签。

Answer 2

我最接近解决方案的方法是在选择AccountTab后添加以下代码行：

this.navCtrl.parent.select(TabsPage.AccountTab);
setTimeout(() => {this.navCtrl.parent.getSelected().push(OrderStatusPage)}, 100);

它根本不是一个好的解决方案，但嘿它有效。