从选项卡转到根页面
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!它节省了我的时间。 谢谢它帮了我很多! @YATOgetRootNav
未弃用,因为它仍然是 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 - 切换标签时出现奇怪的问题