2016-12-17 4 views
2

я сделал ионную 2 с закладками поионные 2 удаление все вида, кроме страницы входа

ionic starts project1 tabs --v2 

затем я добавил страницу и поставщик:

ionic g provider authService 
ionic g page loginPage 

я установил корень после авторизован успешный:

this.nav.setRoot(TabsPage) 

Он перешел на домашнюю страницу. Я установил корень при выходе из:

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