2016-12-17 82 views
2

我通過離子2除去所有視圖除了登錄頁面

ionic starts project1 tabs --v2 

與突片製成的離子2然後我添加了一個頁面和一個提供者:

ionic g provider authService 
ionic g page loginPage 

餘集根登錄成功後:

this.nav.setRoot(TabsPage) 

它導航到HomePage。我在註銷時設置了root:

this.nav.setRoot(LoginPage) 

問題是當我註銷時,標籤面板仍然出現,所有的頁面似乎仍然可以導航到。 當我註銷並隱藏標籤面板時,怎樣才能銷燬所有頁面?

回答

9

我試圖創建一個類似於您的項目,並在登錄頁面添加了一個登錄按鈕。點擊事件被綁定到:

this.navCtrl.setRoot(TabsPage); 

在TabsPage組件,儘量按如下方式使用App控制器:

import { Component } from '@angular/core'; 
import { App } from 'ionic-angular'; 

import { HomePage } from '../home/home'; 
import { AboutPage } from '../about/about'; 
import { ContactPage } from '../contact/contact'; 
import { LoginPage } from '../login-page/login-page'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    // this tells the tabs component which Pages 
    // should be each tab's root Page 
    tab1Root: any = HomePage; 
    tab2Root: any = AboutPage; 
    tab3Root: any = ContactPage; 

    constructor(public appCtrl: App) { 

    } 

    logout() { 
    this.appCtrl.getRootNav().setRoot(LoginPage); 
    } 
} 

假設我們在tabs.html作爲添加導航欄上的退出按鈕如下:

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    <ion-buttons end> 
     <button ion-button color="primary" (click)="logout()">Logout</button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 
<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> 
</ion-tabs> 
+0

謝謝,但它不工作... – Newbie

+0

我已經更新了代碼。請參閱上面的代碼。我希望這次會有效。 –

+0

它的工作!這是驚人的,感謝很多。 – Newbie