从选项卡转到根页面

Posted 2023-03-13

【中文标题】从选项卡转到根页面

【英文标题】：Go to root page from a tab

【发布时间】：2017-07-24 20:29:11

【问题描述】：

我想知道在使用标签时如何返回到appComponent 中定义的rootPage。 setRoot 方法没有按我的预期工作。当它在标签页中使用时，导航堆栈不会被清除。在“主页”上，后退按钮可见，而不是导航切换，并且显示选项卡的标题。

默认情况下，如果页面被导航，页面会被缓存并留在 DOM 中 远离但仍在导航堆栈中（a 上的退出页面 推（）例如）。它们在从 导航堆栈（在 pop() 或 setRoot() 上）。

上面的语句让我期望当我使用 setRoot 时，页面会从缓存中清除。当它用于普通页面而不是标签时，这似乎是正确的。

在标签页的类中，有一个功能，当点击按钮时，将根页设置为主页。

goToHome() 
 this.navCtrl.setRoot(HomePage);

如何确保当我们返回主页时没有返回按钮，并且使用的主页标题在组件的 html 模板中可用。

【问题讨论】：

您可以尝试获取rootNav 吗？就像constructor(private app: App,...) ... 然后this.app.getRootNav().setRoot(YourPage); 如果可行，我将添加一个答案，详细解释所有内容

谢谢它有效。我将不胜感激。

很高兴听到这个消息！我已经添加了一个带有解释的答案:)

【参考方案1】：

试试这个对我很有用

this.childNavCtrl.setRoot(HomePage);

【讨论】：

这对我不起作用，但接受的答案确实

【参考方案2】：

就像你在docs看到的一样

请注意，每个 <ion-tab> 都绑定到 [root] 属性，就像 在上面的导航部分。那是因为每个 <ion-tab> 实际上只是一个导航控制器。 这意味着每个 选项卡有自己的历史堆栈，并注入了NavController 实例 每个标签的子@Components 对每个标签都是唯一的

因此，当将页面设置为 root 时，您使用的是该选项卡中的导航堆栈，而不是整个应用程序中的导航堆栈。这就是为什么您需要通过以下方式获取主导航堆栈：

constructor(private app: App,...) ...

然后

yourMethod(): void 
    this.app.getRootNav().setRoot(YourPage);

【讨论】：

很好的答案...我解决了我的问题谢谢:)

谢谢sebaferreras！它节省了我的时间。

谢谢它帮了我很多！

@YATO getRootNav 未弃用，因为它仍然是 Ionic docs 的一部分。控制台中打印了一个警告，但没有关于应该如何使用新方法的信息（您可以查看 this post from Ionic forum）以遵循 Ionic 团队所说的内容。

是的，我知道这可能会导致一些混乱，但 Ionic 团队没有提供任何关于如何使用新方法的信息（它甚至没有包含在文档中）。同样，getRootNav 是推荐的方式to navigate from an overlay component in Ionic Docs。因此，从Ionic 3.9.2 开始，使用getRootNav 是实现这一目标的正确方法。