离子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():
}
}

switchToLoginPageTabsComponent：

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

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

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