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为登录页面并从主页调用loggedIn页面。点击主页上的转到登录页面按钮后，登录页面内容将替换主页内容。

Answer 2

我猜你将提供者称为可注射类。仅将注入类用于业务验证和HTTP请求。页面构造和页面导航应该在组件类上进行..请使用所有文件和期望编辑您的问题

Answer 3

根据prithivi Raj的回答，您将能够导航到该页面，但无法突出显示标签图标。

inOrder要做到这一点，你做了一些像这样的事情

 this.navCtrl.parrent.select(0);

考虑到你在tab3中，登录后你想导航到tab1 / tab2，只需在上面的代码参数中提到索引，如this.navCtrl.parrent.select(0); / this.navCtrl.parrent.select(1) ;.如果你使用`this.navCtrl.setRoot（“this.loginInPage”），它会引导你到那个标签;它不会突出显示哪些标签会导致用户混淆他现在处于活动状态的标签。

在运行时动态更改Ionic Cordova TabRoot

3 个答案: