Showing a different tab with an if statement on Ionic 2

问题

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

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

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.

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

回答1:

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.

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

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

ps don't forget to import your components

来源：https://stackoverflow.com/questions/39786222/showing-a-different-tab-with-an-if-statement-on-ionic-2