Ionic 3+：如何离开选项卡式界面？

Question

我的 Ionic 应用程序首先加载 LoginComponent，当用户成功登录时，加载允许在相应子视图之间切换的主 TabsComponent 视图。

我正在尝试让它在没有选项卡式界面的情况下独立加载 LoginComponent，但这不起作用（切换到 TabsComponent 后，我无法离开选项卡式界面）。

我已经尝试从 TabsComponent 个子视图之一执行以下命令：

this.navCtrl.push(LoginComponent);      // Loads as a child view
this.navCtrl.setRoot(LoginComponent);   // Loads as a child view
this.navCtrl.popAll();                  // Error: navigation stack needs at least one root page
this.navCtrl.popTo(LoginComponent);     // Error: navigation stack needs at least one root page

我已经多次阅读 Ionic 文档，但我还没有找到这个问题的答案。我错过了什么？

Answer 1

我通过将 TabsComponent 注入它的子组件，然后在 TabsComponent:

中的函数中调用 this.navCtrl.setRoot(LoginComponent); 来解决这个问题

// Child class of TabsComponent (loaded via tab click)
export class SettingsComponent {
    constructor(@Inject(forwardRef(() => TabsComponent)) private tabsComponent: TabsComponent) {
    }

    logOut(): void {
        this.tabsComponent.switchToLoginPage():
    }
}

switchToLoginPage TabsComponent:

import {Component, forwardRef, Inject} from '@angular/core';
// ... 
export class TabsComponent {
    constructor(private navCtrl: NavController) {
    }

    switchToLoginPage(): void {
        this.navCtrl.setRoot(LoginComponent);
    }
}

基于这个例子：

如果有更好的方法我很想知道，否则希望这个解决方案能帮助到任何人。

Ionic 3+：如何离开选项卡式界面？

Ionic 3+: how to navigate away from tabbed interface?

navigation

ionic-framework

ionic-tabs