Ionic2 Tabs after logout still showed up in navigation page, what i missed here?

Question

Here is what i trying to achieve, i already log in into my aplication, but when i logout, the tab is still there until i refresh my page in my login screen, i want it gone from my login screen when i logout how, what i missed here? Here is what i do :

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 :

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(TabsPage);

here is my logout code :

  logout(){
    localStorage.removeItem("currentUser");
    this.navCtrl.setRoot(LoginPagePage);
  }

there i already setRoot into my LoginPagePage, why still the tab appear on the screen? how to fix this?

Answer 1

I found the solution. I have to access.getRootNav() function. I don't know, why the setRoot that I import from NavController is not working to clear the tab. But I read somewhere (I forgot where), that I have to use App. So here is how I do it. I do import "App" from ionic-angular:

import { NavController, App } from 'ionic-angular';

then I access the .getRootNav(), just like my code below:

  logout(){
    localStorage.removeItem("currentUser");
    this._app.getRootNav().setRoot(LoginPagePage);
  }

Then I navigate to my login page, it won't show the tab any more.