fix the navigation with navcontroller in ionic 2

Question

i'm trying to implement a simple ionic app with login authentification, when the user enter the credentials and hit login i sat the Root for the Nav to be the TabsPage that contains the home,contact and about pages.The problem is when the i hit the logout button in the home page it redirect the home tab(see logout function in home.ts) to the login page(set the Root to loginPage) and the three tabs stays at the bottom, i want fully redirection to the loginPage any suggestions ? login page

after logout in home page

app.component.ts :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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();
});
  }
}

login.ts :

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import {TabsPage} from '../tabs/tabs';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  loading: Loading;
  registerCredentials = { email: '', password: '' };

  constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

  public login() {
//this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
  if (allowed) {    
    console.log('allowed');    
    this.nav.setRoot(TabsPage); //move to tabspage
  } else {
    this.showError("Access Denied");
     console.log('denied');
  }
},
  error => {
    this.showError(error);
  });
  }

  showLoading() {
this.loading = this.loadingCtrl.create({
  content: 'Please wait...',
  dismissOnPageChange: true
});
this.loading.present();
  }

  showError(text) {
//this.loading.dismiss();

let alert = this.alertCtrl.create({
  title: 'Fail',
  subTitle: text,
  buttons: ['OK']
});
alert.present(prompt);
  }
}

home.ts :

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import {LoginPage} from '../login/login';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  username = '';
  email = '';
  constructor(private nav: NavController, private auth: AuthService) {
let info = this.auth.getUserInfo();
this.username = info['name'];
this.email = info['email'];
  }

  public logout() {
this.auth.logout().subscribe(succ => {
  this.nav.setRoot(LoginPage)
});
  }
}

Answer 1

I got around this issue by getting the navcontroller from app.

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

Inject the app object.

constructor(private app:App,private nav: NavController, private auth: AuthService) {//...
 }

In logout function, use getRootNav().

 public logout() {
this.auth.logout().subscribe(succ => {
  this.app.getRootNav().setRoot(LoginPage)
});