Как я могу скрыть и показать ion-вкладки условно в ionic2?

Question

У меня 5 вкладок

<ion-tabs tabsPlacement="bottom" tabsLayout="icon-top" tabsHighlight="true" color="primary">
  <ion-tab [root]="myCardsTabRoot" tabTitle="My Cards" tabIcon="ios-photos"></ion-tab>
  <ion-tab [root]="calendarTabRoot" tabTitle="Calendar" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="myProfileTabRoot" tabTitle="My Profile" tabIcon="ios-person"></ion-tab>
  <ion-tab [root]="searchTabRoot" tabTitle="Search" tabIcon="ios-search"></ion-tab>
  <ion-tab [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>

Я хочу показать последнюю вкладку, только если есть какие-либо ожидающие запросы, я попробовал ниже, но все еще нет шансов и не показывает / скрывает вкладку, когда pendingRequests значение меняется, значение pendingRequests изменен в ionViewDidEnter()

  <div *ngIf="pendingRequests > 0">
    <ion-tab [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>
  </div>

а также

<ion-tab *ngIf="pendingRequests > 0" [root]="pendingRequestsTabRoot" tabTitle="Follow Req" tabIcon="notifications" tabBadge="{{pendingRequests}}" tabBadgeStyle="danger"></ion-tab>

Если я перезагружаю приложение, вкладки отображаются правильно в зависимости от значения pendingRequests единственная проблема заключается в том, что при изменении значения вкладки не отображаются / не отображаются соответственно

вот код для обновления pendingRequests

  ionViewDidEnter() {
    this.refreshPrendingRequests();
  }

  refreshPrendingRequests() {
    this.contactsService.getContactRequestsCount(this.userInfoService.currentProfile.id)
      .subscribe(count => this.pendingRequests = count);
  }

Обновить

Основываясь на предложении @Sampath, я создаю для него плункер. Поведение отличается от того, что у меня есть в моем приложении, но и это тоже не работает.

Нажатие на верхнюю правую кнопку панели инструментов должно показать / скрыть вкладку http://plnkr.co/edit/Cx6Pyr9AihvX66ASed0s?p=preview

Answer 1

Вы можете сделать это, если выполните следующие шаги. Код не требует пояснений. Если вам нужна помощь, прокомментируйте ниже.

Примечание: это всего лишь рабочий пример. Надеюсь, вы легко сможете преобразовать его в свой вариант использования.

Вы можете играть с этим, если клонируете Git Repo здесь.

В этом примере я использовал шаблон публикации / подписки Ionic2 Event

Шаг 1. Создайте еще одну вкладку TabSet1Page

.ts

@Component({
  selector: 'page-tab-set1',
  templateUrl: 'tab-set1.html'
})
export class TabSet1Page {

  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;

  constructor() { }

}

.html

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

Шаг 2:

app.component.ts

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

  constructor(public events: Events) {

    this.subscribePendingRequests();//subscribe
    this.events.publish('pending-requests', 0);//publish
  }

  //subscribe
  subscribePendingRequests() {
    this.events.subscribe('pending-requests', (data) => {
      if (data > 0) {
        this.rootPage = TabSet1Page;
      }
      else {
        this.rootPage = TabsPage;
      }
    });
  }

}

Шаг 3:

about.ts

 @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    export class AboutPage {

      constructor(public events: Events) { }

      //refresh
      refreshPendingRequests() {
        this.events.publish('pending-requests', 5);
      }
   } 

about.html

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
     <ion-buttons end>
      <button ion-button icon-only (click)="refreshPendingRequests()">
        <ion-icon name="ios-funnel"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>