如何使用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

我只对涉及Ionic 2(和Angular 2.0)的答案感兴趣,而不是旧版本.

Answer 1

在您的应用中,定义以下内容:

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