angular - 从选项卡转到根页面

Question

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

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 页面时会从缓存中清除。在普通页面而不是选项卡中使用时，这似乎是正确的。

在标签页的类中，有一个函数可以在点击按钮时将根页面设置为主页。

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

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

Answer 1

就像您在 docs 中看到的一样

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

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

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

然后

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