1

我的 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 文档，但我还没有找到这个问题的答案。我错过了什么？

4

1 回答 1

0

我已经通过注入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);
    }
}

基于此示例：如何将父组件注入子组件？

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

于 2017-12-07T20:25:27.020 回答