首页 文章

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

提问于
浏览 次
4

在我的 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 的上下文中对其进行逻辑设置

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

angularjs ionic-framework ionic angular ionic2

2 回答

  • 4

    在您的应用中，定义以下内容：

    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);
        }
    }
}
    回复于
  • 5

    如果您的应用始终以登录页面打开，您应该：

    1-将您的登录页面放在app.html中

    2-在app.js构造函数中导入并注入NavController .

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

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

    3-创建新的Tabs父组件 . （您当前的app.js）并将其称为TabsParentComponent .

    4-在app.js中，一旦登录成功，请致电：

    this.nav.setRoot(TabsParentComponent)
    回复于

相关问题