离子2侧菜单和注销和返回键导航

Question

我想实现注销功能。我正在使用FB身份验证。我的问题在于我成功注销后（这发生在侧面菜单中）我返回登录屏幕。但现在，如果我点击设备的背面按钮，它带我到首页（不知道如何避免这种情况？

这是我app.component.ts

import { Component, ViewChild } from '@angular/core'; 
import { Platform, Nav, AlertController } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { LoginPage } from '../pages/login/login'; 
import { NativeStorage } from '@ionic-native/native-storage'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import { Facebook } from 'ionic-native'; 
@Component({ 
    templateUrl: 'app.html', 

}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 
    rootPage: any = LoginPage; 

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage: NativeStorage, private alertCtrl: AlertController) { 
    platform.ready().then(() => platform.ready().then(() => { 
     this.nativeStorage.getItem("userId").then((data) => { 
     console.log(data.userExists); 
     this.rootPage = TabsPage; 
     this.nav.push(TabsPage); 

     }, (error) => { 
     console.log("No data in storage"); 
     this.nav.push(LoginPage); 
     }) 
     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }) 

    ) 
    } 

    presentConfirm() { 
    let alert = this.alertCtrl.create({ 
     title: "Confirm Logout", 
     message: "Do you really really want to quit this awesome app?", 
     buttons: [{ 
     text: 'Nah! Just Kidding!', role: 'cancel', handler:() => { 
     } 
     }, 
     { 
     text: "Ok", 
     handler:() => { 
      this.nativeStorage.clear(); 
      this.nav.push(LoginPage);   
      this.rootPage = LoginPage; 
      Facebook.logout().then((response) => { 
      }, (error) => { 
      }) 
     } 
     }] 
    }); 
    alert.present(); 
    } 

} 

这是我的登录页面。 Login.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Facebook } from 'ionic-native'; 
import { NativeStorage } from '@ionic-native/native-storage'; 
import { TabsPage } from '../tabs/tabs' 

@Component({ 
    selector: 'login-home', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 

    constructor(public navCtrl: NavController, private nativeStorage: NativeStorage) { 

    } 

    FBLogin() { 
    //this.navCtrl.push(TabsPage); - To be used on browser environment 
    Facebook.login(['email']).then((response) => { 
     Facebook.getLoginStatus().then((response) => { 
     if (response.status == 'connected') { 
      this.navCtrl.push(TabsPage); // - to be used on device 
      console.log("Setting Storage") 
      this.nativeStorage.setItem("userId", { userExists: true });   
      Facebook.api('/' + response.authResponse.userID + '?fields=id,name,gender', []).then((response) => { 
      }, (error) => { 
      alert(error) 
      }) 
     } 
     else 
      alert("Not Logged in"); 
     }) 

    }, (error) => { 
     console.log((error)); 
    }) 
    } 


} 

这是我的菜单

<ion-menu swipeEnabled="false" side="right" [content]="content"> 
    <ion-toolbar> 
    <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    <ion-content> 
    <ion-list>  
    <p>&nbsp;</p> 
     <button menuClose padding-top ion-item> Test 1 </button>  
     <button menuClose ion-item> Test 2 </button> 
     <button menuClose ion-item (click)="presentConfirm()"><ion-icon name="power"></ion-icon>&nbsp;&nbsp;Logout </button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav> 

Answer 1

你的问题是，你正在做的：

 this.nav.push(LoginPage);   

在您的注销处理程序中。 这意味着LoginPage被添加到您的旧导航堆栈顶部。您需要设置一个新的堆栈并将root设置为LoginPage。 做：

this.nav.setRoot(LoginPage);