在 ionic 2 中使用 navcontroller 修复导航答案

【问题标题】：fix the navigation with navcontroller in ionic 2在 ionic 2 中使用 navcontroller 修复导航
【发布时间】：2017-04-26 18:29:15
【问题描述】：

我正在尝试使用登录身份验证实现一个简单的 ionic 应用程序，当用户输入凭据并点击登录时，我将导航的 Root 设置为包含主页、联系人和关于页面的 TabsPage。问题是当我点击主页中的注销按钮时，它将主页选项卡（请参阅 home.ts 中的注销功能）重定向到登录页面（将根设置为 loginPage）并且三个选项卡停留在底部，我希望完全重定向到loginPage 有什么建议吗？ 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();
});
  }
}

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

【问题讨论】：

标签： ionic2

【解决方案1】：

我通过从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)
});

【讨论】：