cordova - 在运行时动态更改 Ionic Cordova TabRoot

Question

我创建了一个 Ionic Tabs 应用程序。

Tabs.html:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="md-home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="md-information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="My Account" tabIcon="md-log-in"></ion-tab>
</ion-tabs>

和Tabs.ts

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = LoginPage;

  constructor()
  {}

}

我想要做的是，一旦我进入 tab3Root(LoginPage)并登录，我想将其更改为 LoggedinPage。 保持其他选项卡正常运行。

这可能吗？如果是的话请问如何？

谢谢

添加信息:检查/编辑此链接，它包含我的代码作为示例 stackblitz.com/edit/ionic-yff2sx

Answer 1

只需使用 setRoot 方法从该选项卡调用其他页面即可。从登录页面调用以下方法。

this.navCtrl.setRoot(this.loggedInPage);

Please refer this working demo

我假设 home.ts 作为登录页面，并从主页调用登录页面。点击主页中的转到登录页面按钮后，登录页面内容将替换主页内容。