Ionic framework 如何在ionic2中有条件地隐藏和显示ion选项卡？

我有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>

及

更新 基于@Sampath建议，我为它创建了一个plunker。这种行为与我在应用程序上的行为不同，但这一行为也不起作用

单击右上角工具栏按钮应显示/隐藏选项卡

---

如果您按照以下步骤操作，则可以执行此操作。代码是不言自明的。如果您需要任何帮助，请在下面进行评论

注意：这只是一个工作示例。希望您可以轻松地将其转换为您的用例

如果你克隆了，你可以玩这个

我在这个样本上使用了Ionic2

步骤1:创建另一个选项卡页面

TabSet1Page

.ts

.html

第三步：

关于.ts

about.html

关于

如果您按照以下步骤操作，您可以这样做。代码是不言自明的。如果您需要任何帮助，请在下面进行评论

注意：这只是一个工作示例。希望您可以轻松地将其转换为您的用例

如果你克隆了，你可以玩这个

我在这个样本上使用了Ionic2

步骤1:创建另一个选项卡页面

TabSet1Page

.ts

.html

第三步：

关于.ts

about.html

关于

您能否显示

pendingRequests

代码段的值更改？调试代码时您能看到什么？该值的更改是如何工作的？@Sampath I在工具栏上添加了另一个按钮，该按钮正在正确隐藏和显示，因此，这意味着更改值工作得非常完美，甚至角度绑定也正常工作。任何控制台错误或类似错误？@Sampath谢谢帮助。您可以显示

pendingRequests

代码片段的值更改吗？调试代码时您能看到什么？值更改是如何工作的？@Sampath I在工具栏上添加了另一个按钮，其中一个按钮正在正确隐藏和显示，因此这意味着更改值工作正常，甚至角度绑定工作正常任何控制台错误或类似情况？@Sampath感谢帮助谢谢，根据我对你的代码的理解，想法是有两个不同的页面，其中一个有2个选项卡，另一个有3个页面，然后根据根页面的值变化，是否正确？对此有任何反馈吗？我知道这会起作用，但是我有两个选项卡要显示隐藏，然后我必须创建4个组合来支持这一点，这是您唯一的选择。由于选项卡设计的性质，您不能像其他HTML元素那样执行此操作。因为选项卡的工作方式类似于根页面。因此，如果您需要继续使用此用例，您必须使用上述解决方案。谢谢，根据我对你的代码的理解，想法是有两个不同的页面，其中一个有2个选项卡，另一个有3个页面，然后根据根页面的值变化，是否正确？对此有任何反馈吗？我知道这会起作用，但我有两个选项卡要显示隐藏，然后我必须创建4个组合来支持这一点，这是您唯一的选择。由于选项卡设计的性质，您不能像其他HTML元素那样执行此操作。因为选项卡的工作方式类似于根页面。因此，如果您需要继续使用此用例，您必须使用上述解决方案。

  <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>

  ionViewDidEnter() {
    this.refreshPrendingRequests();
  }

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

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

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

  constructor() { }

}

<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>

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

}

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

      constructor(public events: Events) { }

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

<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>