从选项卡转到根页面 [英] Go to root page from a tab

问题描述

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

I would like to know how to go back to the rootPage defined in the appComponent when using tabs. The setRoot method is not working as I expected. When it is used in a Tab page the navigation stack is not cleared. On the 'home page' the back button is visible instead of the the navigation toggle and the title of tab is shown.

默认情况下，如果页面被导航
远离导航堆栈，页面将被缓存并保留在DOM中（
push（）上的退出页面）。从
导航堆栈（pop（）或setRoot（））中删除它们时会被销毁。

By default, pages are cached and left in the DOM if they are navigated away from but still in the navigation stack (the exiting page on a push() for example). They are destroyed when removed from the navigation stack (on pop() or setRoot()).

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

The statement above gives me the expectation that when I use setRoot pages are cleared from the cache. This seems to be true when it is used in a normal page but not in a tab.

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

In the class of the tab page there is a function that sets the rootpage to home when the button is clicked.

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

我怎样才能确保当我们返回主页时没有后退按钮和主页的标题用于组件的html模板中。

How can I make sure that when we are returned to the homePage there is no back button and the title of the home is used that is available in the html template of the component.

推荐答案

就像你可以在 docs

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

Notice that each <ion-tab> binds to a [root] property, just like in the Navigation section above. That is because each <ion-tab> is really just a navigation controller. This means that each tab has its own history stack, and NavController instances injected into children @Components of each tab will be unique to each tab

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

So when setting a page as root, you're using the navigation stack from that tab, and not the one of the entire app. That's why you need to get the main navigation stack by doing:

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

然后

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

这篇关于从选项卡转到根页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！