typescript - Como posso esconder e mostrar abas condicionalmente - Ionic 2?

O caso é o seguinte: eu tenho um contêiner ion-tabs com vários elementos ion-tab, e diferentes usuários que fazem login no meu aplicativo. O que eu preciso fazer é mostrar ou esconder os elementos ion-tab dependendo do tipo de usuário logado.

O problema é que eu preciso fazer isso dinamicamente, e se eu usar uma diretiva como [show]="variável", isso não funciona.

abas.ts

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

import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any;
  tab2Root: any;
  tab3Root: any;
  tab4Root: any;
  tab5Root: any;
  variable: any;

  constructor(public userData: UserData) {
   // get variable from local storage
    this.userData.getUser().then((value) => {
      if(value.typeLabel == 'Expert') {
        this.variable = true;
        console.log('1->',value.typeLabel);
      }else if(value.typeLabel == 'Client'){
        this.variable = false;
        console.log('2->',value.typeLabel);
      }
    });

    this.tab1Root = this.variable?Page1:Page2; <-- i want to show specify tabs depending on variable value
    this.tab2Root = NotificationsPage;
    this.tab3Root = MessagesPage;
    this.tab4Root = InstructionsPage;
    this.tab5Root = ExpertsPage;
  }
}

abas.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab_title" tabIcon="notifications"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
</ion-tabs>

Mas sempre this.tab1Root retorna Page1;

O que estou fazendo de errado? Alguém pode me ajudar?

Resposta #1

tente usar *ngIf

<ion-tabs *ngIf = "variable">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab_title" tabIcon="notifications"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="tab_title" tabIcon="home"></ion-tab>
</ion-tabs>

Dentro do seu arquivo .ts

defina a variável variable=true para exibir as abas, defina-a false para não exibir as abas.

Resposta #2

Crie um array de abas em seu componente e use-o para carregar seu template dinamicamente. Você então poderá manipular facilmente o array de abas em seu componente:

abas.ts

import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';

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

  tabs: any[] = [
    { title: "Home", root: Page2, icon: "home" },
    { title: "tab_title", root: NotificationsPage, icon: "notifications" },
    { title: "tab_title", root: MessagesPage, icon: "home" },
    { title: "tab_title", root: InstructionsPage, icon: "home" },
    { title: "tab_title", root: ExpertsPage, icon: "home" }
  ];

  constructor(public userData: UserData) {
    // get variable from local storage
    this.userData.getUser().then((value) => {
      if(value.typeLabel == 'Expert') {
        this.tabs[0].root = Page1;
        console.log('1->',value.typeLabel);
      } else if(value.typeLabel == 'Client'){
        this.tabs[0].root = Page2;
        console.log('2->',value.typeLabel);
      }
    });
  }
}

abas.html

<ion-tabs>
  <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>