在 Ionic 2 上显示带有 if 语句的不同选项卡

Question

Ionic 2 似乎与 1 大不相同。我使用了启动项目，这些是我的文件：

Tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
</ion-tabs>

Tabs.ts

import { Component } from '@angular/core';

import { SigninPage } from '../Auth/Signin/Signin';

@Component({
  templateUrl: 'Tabs.html'
})
export class TabsPage {

  tab1Root: any = SigninPage;

  constructor() {

  }
}

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { TabsPage } from '../pages/Tabs/Tabs';

@Component({
    template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
    rootPage = TabsPage;

    constructor(platform: Platform) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
        });
    }
}

有没有办法用 if 条件显示不同的选项卡？例如，我想根据 if 块显示 Tabs.App.html 或 Tabs.Auth.html。

使用 Ionic 2 的最佳方法是什么？

Answer 1

在 ionic2 中，每一页都伴随着它的 .ts 文件。因此，如果您想要 2 个选项卡，app.html 和 auth.html，您将需要创建这两个页面及其 .ts 文件。

这样你就可以写一个 if 语句：

if(1 > 2){
  this.rootpage = AuthTab;
}else{
  this.rootpage = AppTab;
}

ps 不要忘记导入您的组件