我们如何在 Ionic 2 中隐藏一个选项卡单击另一个选项卡菜单应用程序图标？

Question

我正在开发一个 ionic 2 应用程序，并且我的应用程序中有多个选项卡。单击底部选项卡菜单图标时，我需要隐藏顶部选项卡。

• My Plunker供参考。

我正在寻找的是，在单击底部选项卡菜单应用程序图标时，需要隐藏上面的选项卡。

在 angularjs 中，我可以使用 ng-hide 隐藏该字段，但我不知道如何在 ionic 2 中隐藏该字段。

点击时 tab menu apps icon:

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

以上标签需要隐藏

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

我的多个标签元素：

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

如果您有解决方案，请更新plunker。

Answer 1

Ionic2 正在使用 Angular2，您可以使用 [hidden] 绑定基于单击绑定到您想要的任何元素来隐藏。但请记住，ion-tabs 也是标签页的容器，而不仅仅是一些菜单。隐藏它将隐藏当前标签页。

查看plunkr

<ion-tabs tabs-only (click)="x()" >
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar (click)="x()" [hidden]="hideTopTab" >
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>

</ion-tabs>

和

  hideTopTab:boolean=false;
  x(){
    this.hideTopTab = true;
  }