从选项卡转到根页面

问题描述 投票:8回答:2

我想知道如何在使用制表符时返回appComponent中定义的rootPage。 setRoot方法无法正常工作。在标签页中使用它时,不会清除导航堆栈。在“主页”上,后退按钮可见,而不是导航切换,并显示选项卡的标题。

默认情况下,页面被缓存并留在DOM中,如果它们被导航离开但仍然在导航堆栈中(例如,push()上的退出页面)。从导航堆栈中删除它们时会被破坏(在pop()或setRoot()上)。

上面的陈述让我期望当我使用setRoot页面时从缓存中清除。当它在普通页面中使用但在选项卡中不可用时,这似乎是正确的。

在选项卡页面的类中,有一个函数可以在单击按钮时将根页面设置为home。

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

如何确保当我们返回到homePage时,没有后退按钮,并且使用了组件的HTML模板中可用的主页标题。

angular typescript ionic-framework ionic2 ionic3
2个回答
25
投票

就像你可以在docs看到的那样

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

因此,当以root身份设置页面时,您将使用该选项卡中的导航堆栈,而不是整个应用程序中的导航堆栈。这就是你需要通过以下方式获得主导航堆栈的原因:

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

然后

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

2
投票

试试这个对我来说很棒

this.childNavCtrl.setRoot(HomePage);
© www.soinside.com 2019 - 2024. All rights reserved.