从选项卡转到根页面

Posted

技术标签:

【中文标题】从选项卡转到根页面【英文标题】: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 是实现这一目标的正确方法。

以上是关于从选项卡转到根页面的主要内容,如果未能解决你的问题,请参考以下文章

带有标签的 ActionBar - 切换标签时出现奇怪的问题

JS 弹出框 确定后 转到另外一个页面

实现从A页面跳转到B页面的tab选项卡的指定页上

一个页面跳转到另一个页面的tab选项卡的指定页上,该如何处理

一个页面跳转到另一个页面的tab选项卡的指定页上

mui顶部选项卡(可左右滑动)分页跳转