如何正确地为登录页面隐藏ionic2选项卡?

时间:2016-12-07 07:09:21

标签: angular ionic-framework ionic2 ionic-tabs

这是我想要实现的,我想在我的项目中添加Tabs组件,但我不希望在我登录到页面的其余部分之前显示该选项卡。我做的是这样的:

我的app.component.ts:

export class MyApp {
  public rootPage: any = TabsPage;

  constructor(platform: Platform) {

    if (localStorage.getItem("currentUser") === null) {
      console.log("not logged in");
        this.rootPage = LoginPagePage;
    } else {
      console.log("already logged in");
        this.rootPage = TabsPage;
    }

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

下面是我的tabs.ts:

export class TabsPage {

  public tab1Root: any;
  public tab2Root: any;
  public tab3Root: any;

  constructor() {
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ExplorePage;
  }

}

然后这是我的tabs.html:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Rsoot" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

当我这样做时,首次加载时显示正常,标签不会显示。然后我登录后,我设置

this.navCtrl.setRoot(HomePage);

在我的登录功能中,但是当我已经登录时标签没有显示,除此之外,我必须刷新页面以获得&#34;标签&#34;出现。它发生在我退出的时候..如何解决这个问题?我希望在除登录页面之外的每个页面中显示标签

1 个答案:

答案 0 :(得分:2)

登录成功后,一切都正确

更改此

this.navCtrl.setRoot(Homepage,{})

到这个

this.navCtrl.setRoot(TabsPage,{})

一切都会正常运行,不要忘记在登录页面中导入标签页