Question

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

My Plunker供参考。

我要找的是，点击底部标签菜单应用图标，需要隐藏上面的标签。

在angularjs中，我可以使用ng-hide隐藏此字段，但我不知道如何在离子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;
  }

我们如何隐藏一个标签点击Ionic 2中的另一个标签菜单应用程序图标？

1 个答案: