Question

我尝试使用登录身份验证来实现一个简单的离子应用程序，当用户输入凭据并点击登录时，我将导航的Root作为包含主页，联系人和关于页面的TabsPage。问题是，当我点击主页中的注销按钮时，它将主页选项卡（请参阅home.ts中的注销功能）重定向到登录页面（将Root设置为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();
});
  }
}

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

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

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

注入app对象。

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

在退出功能中，使用getRootNav()。

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

使用离子2中的navcontroller修复导航

1 个答案: