时间戳

首页 > 解决方案 > 主页上的选项卡

ionic-framework - 主页上的选项卡

问题描述

我试图在我的主页中创建选项卡，但是当我将主页作为选项卡中的选定索引时，页面没有加载，这是我的代码：

home.ts:

...
export class HomePage {
  public isConnected: Boolean= true;

  homeRoot = HomePage;
  aRoot = SigninPage;
  bRoot = SignupPage;
...

主页.html：

///SOME CONTENT
<ion-tabs selectedIndex="0" *ngIf="isConnected">
                <ion-tab [root]="homeRoot" tabTitle="Home"></ion-tab>
                <ion-tab [root]="aRoot" tabTitle="Home"></ion-tab>
                <ion-tab [root]="bRoot" tabTitle="Home"></ion-tab>

            </ion-tabs>

app.compenents.ts：

//IMPORTS

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

标签： ionic-framework

解决方案

创建一个新页面 TabsPage。

//制表符.ts

export class TabsPage{
public isConnected: Boolean= true;

homeRoot = HomePage;
aRoot = SigninPage;
bRoot = SignupPage;

//选项卡.html

 <ion-tabs selectedIndex="0" *ngIf="isConnected">
            <ion-tab [root]="homeRoot" tabTitle="Home"></ion-tab>
            <ion-tab [root]="aRoot" tabTitle="Home"></ion-tab>
            <ion-tab [root]="bRoot" tabTitle="Home"></ion-tab>

  </ion-tabs>

//app.component.ts

 //IMPORTS
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

推荐阅读