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注入其子组件，然后在this.navCtrl.setRoot(LoginComponent);内的函数中调用TabsComponent来解决这个问题：

// 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?

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

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

1 个答案: