如何使用Ionic 2框架創建登錄頁面，然後導致選項卡式視圖？

Question

Currenty，在我app.html文件，我有：

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="time"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Tab2" tabIcon="paper"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Tab3" tabIcon="more"></ion-tab> 
</ion-tabs> 

，並在我的app.js文件，做這些網頁的適當進口後，我有：

this.tab1Root = Page1; 
    this.tab2Root = Page2; 
    this.tab3Root = Page3; 

我想要的應用程序打開與一個登錄頁面，然後從那裏進展到這個標籤視圖。我不知道如何在邏輯的app.html和app.js

我只是在涉及離子2（與角2.0）的答案感興趣的背景下成立的，並非舊版本。

Answer 1

如果你的應用程序總是與登錄頁面打開，你應該：

1 - 把你的登錄頁面app.html

2 - 導入並在app.js構造注入NavController。

import {NavController} from 'ionic-framework/ionic'; 

constructor(nav: NavController) { 
    this.nav = nav; 
} 

3-創建一個新的製表符父組件。 （你當前的app.js），並將其稱爲TabsParentComponent。

4-在app.js，一旦登錄成功，請致電：

this.nav.setRoot(TabsParentComponent) 

Answer 2

在你的應用程序，定義這個：

export class YourApp { 
    rootPage: Type = LoginPage; 

    constructor(app: IonicApp, platform: Platform) { 
    platform.ready().then(() => { 

    }); 
    } 
} 

在你LoginPage，它應該有這樣的：

export class LoginPage { 
    constructor(nav: NavController) { 
     this.nav = nav; 
    } 

    doLogin() { 
     if (loginSuccessful) { 
      this.nav.setRoot(YourTabsPage); 
     } 
    } 
}