How to hide ionic2 Tabs just for login page properly?

Question

Here is what i trying to achieve, i want add Tabs component to my project, but i don't want the tab showing up before i logged in to the rest of the page. what i do is like this :

my 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();
    });
  }
}

below is my tabs.ts :

export class TabsPage {

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

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

}

then here is my 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>

when i do that, it appear normal when first load, the tabs doesn't show up. Then after i logged in, i do set

this.navCtrl.setRoot(HomePage);

in my login function, but the tabs doesn't showing up while i already logged in, beside that, i have to refresh the page to have the "tabs" showing up. it happends to when i log out too.. how to solve this? i want tabs showing in every page except my login page

Answer 1

everything is correct after the sucess of your login try to do

change this

this.navCtrl.setRoot(Homepage,{})

to this

this.navCtrl.setRoot(TabsPage,{})

everything will work fine, and don't forget to import your tabs page in your login page