修復導航與navcontroller在離子2

Question

我試圖實現一個簡單的離子應用與登錄認證，當用戶輸入憑據，並擊中登錄我坐在導航的根是包含家庭的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(); 
}); 
    } 
} 

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獲得navcontroller來解決這個問題。

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