如何使用Ionic 2框架创建登录页面，然后导致选项卡式视图？

Question

Currenty, in my app.html file, I have:

<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>

and in my app.js file, after doing the proper imports of these pages, I have:

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

I want the application to open with a login page, and then from there progress to this tabbed view. I'm not sure how to logically set this up in the context of app.html and app.js

I'm only interested in answers involving Ionic 2 (and Angular 2+), not the older versions.

Answer 1

In your app, define this:

export class YourApp {
  rootPage: Type = LoginPage;

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

    });
  }
}

In your LoginPage, it should have this:

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

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

Answer 2

if your app is always opening with login page, you should:

1- Put your login page in app.html

2- Import and inject NavController in your app.js constructor.

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

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

3- Create a new Tabs parent component. ( your current app.js ) and call it TabsParentComponent for example.

4- In app.js, once the login is successful, call:

this.nav.setRoot(TabsParentComponent)