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

Question

我通過

ionic starts project1 tabs --v2 

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

ionic g provider authService 
ionic g page loginPage 

餘集根登錄成功後：

this.nav.setRoot(TabsPage) 

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

this.nav.setRoot(LoginPage) 

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

Answer 1

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

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>