Ionic2 在爱奥尼亚2中安装导航控制器

Ionic2 在爱奥尼亚2中安装导航控制器,ionic2,Ionic2,我正在尝试实现一个简单的带有登录身份验证的ionic应用程序,当用户输入凭据并点击login i sat Root时,Nav将成为包含主页、联系人和关于页面的选项卡。问题是,当我点击主页中的注销按钮时,它会重定向主页选项卡(请参阅home.ts中的注销功能)到登录页面(将Root设置为loginPage),三个选项卡保持在底部,我希望完全重定向到loginPage有什么建议吗? app.component.ts: import { Component } from '@angular/cor

我正在尝试实现一个简单的带有登录身份验证的ionic应用程序,当用户输入凭据并点击login i sat Root时,Nav将成为包含主页、联系人和关于页面的选项卡。问题是,当我点击主页中的注销按钮时,它会重定向主页选项卡(请参阅home.ts中的注销功能)到登录页面(将Root设置为loginPage),三个选项卡保持在底部,我希望完全重定向到loginPage有什么建议吗?

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

我通过从中获取导航控制器解决了这个问题

注入应用程序对象

constructor(private app:App,private nav: NavController, private auth: AuthService) {//...
 }
在注销函数中,使用
getRootNav()


我通过从中获取导航控制器解决了这个问题

注入应用程序对象

constructor(private app:App,private nav: NavController, private auth: AuthService) {//...
 }
在注销函数中,使用
getRootNav()

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