2017-04-26 6 views
0

ユーザーが資格情報を入力してログインすると簡単なイオンアプリを実装しようとしています。ホームを含むTabsPageになるようにNavのルートを設定しました。連絡先とページについて。私はホームページのログアウトボタンを押してホームタブ(home.tsのログアウト機能を参照)をログインページ(ルートをloginPageに設定)にリダイレクトし、3つのタブは下の、私は完全に任意の提案をloginPageにリダイレクトしたいですか? login pagenavcontroller with ionicのナビゲーションを修正しました2

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

答えて

2

navcontrollerをappから取得してこの問題を回避しました。

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

ありがとうございました! – yassinesabri

関連する問題