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);
    }
}

基于此示例：How do I inject a parent component into a child component?

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