在 Ionic 选项卡之间导航并清除导航堆栈答案

【问题标题】：Navigating between Ionic tabs and clearing navigation stack在 Ionic 选项卡之间导航并清除导航堆栈
【发布时间】：2018-08-21 00:45:01
【问题描述】：

我的应用有三个标签：

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

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

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

其中 TabsPage.Tab3 是 Tab3 的索引。

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

然后，我关注了 Ionic 的 Tab 文档，该文档建议我可以通过调用 this.navCtrl.parent.select 来更改选项卡。

最后，我尝试将 OrderStatusPage 推入堆栈。

当我运行它时会发生以下情况：

当应用程序弹出到根目录时，它似乎确实清除了导航堆栈，但在控制台中我可以看到它点击了我的登录页面，该页面不在选项卡导航堆栈上，所以我不明白如何那个会发生。我也不喜欢它导航到根目录的方式。是否有某种方法可以在不将用户移离页面的情况下清除堆栈？
然后页面成功导航到我的 Tab3 页面，但将 OrderStatusPage 推送到堆栈的命令似乎没有注册。

有什么想法吗？

【问题讨论】：

【解决方案1】：

每个选项卡都有自己的navCtrl，所以当你切换到Tab3时，你需要将OrderStatusPage推入Tab3的navCtrl，但你似乎使用的是同一个this.navCtrl。

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

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

您可以将每个标签页的 navCtrl 放入服务或全局变量中，就像在 here 中讨论的方法一样（在：将每个标签页推入堆栈），然后 push/pop使用该服务进入他们。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：