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

问题描述

我正在尝试使用登录身份验证来实现一个简单的离子应用程序，当用户输入凭据并点击登录时，我将导航的Root作为包含主页，联系人和关于页面的TabsPage。问题是当我点击主页中的注销按钮时，它将主页选项卡（请参阅home.ts中的注销功能）重定向到登录页面（将Root设置为loginPage），并且三个选项卡保持在底部，我想完全重定向到loginPage有什么建议吗？

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

app.component.ts：

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

推荐答案

我从。

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修复导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！