在Ionic 2上显示带有if语句的其他选项卡 [英] Showing a different tab with an if statement on Ionic 2

问题描述

Ionic 2似乎与1完全不同.我使用了入门项目，这些是我的文件:

Ionic 2 seems very different from 1. I used the starter project and those are my files:

Tabs.html

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

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.

Is there any way to show a different tab with an if condition? For example, I want to show Tabs.App.html or Tabs.Auth.html depending on an if block.

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

What is the best way to do it with Ionic 2?

推荐答案

在ionic2中，每个页面都带有它的.ts文件.因此，如果需要2个选项卡app.html和auth.html，则需要创建这些页面及其.ts文件.

In ionic2 every page is accompanied by it's .ts file. So if you want 2 tabs, app.html and auth.html you would need to create both these pages and their .ts file.

通过这种方式，您可以写一个if语句:

In that way you can write an if-statement saying:

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

ps不要忘记导入组件

这篇关于在Ionic 2上显示带有if语句的其他选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！