使用 ionic 2 中的 navcontroller 修复导航

我正在尝试实现一个具有登录身份验证的简单离子应用程序，当用户输入凭据并点击登录时，我将导航的根设置为包含主页、联系方式和关于页面的选项卡页面。问题是当我点击主页中的注销按钮，它将主页选项卡（请参阅 home.ts 中的注销功能）重定向到登录页面（将根设置为 loginPage），并且三个选项卡保留在底部，我想完全重定向到任何登录页面建议？登录页面 https://i.stack.imgur.com/9HCF9.png

在主页注销后 https://i.stack.imgur.com/25zGW.png

应用程序组件.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();
});
  }
}

登录.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);
  }
}

主页.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)
});
  }
}

我通过获取导航控制器解决了这个问题app http://ionicframework.com/docs/api/components/app/App/.

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

注入应用程序对象。

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

在注销功能中，使用getRootNav().

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