angularjs – 如何使用Ionic 2框架创建登录页面,然后导致选项卡

发布时间：2020-12-17 17:53:58 所属栏目：安全来源：网络整理

导读：Currenty,在我的app.htmlfile中,我有： 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-t

Currenty,在我的app.htmlfile中,我有：

<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)的答案感兴趣,而不是旧版本.

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!