Ionic2 menuToggle动态隐藏

Question

我正在使用Ionic2，并希望在用户事件上显示/隐藏menuToggle。 This就是它在Ionic1中的表现。有谁知道如何在Ionic2中做到这一点？

由于

Answer 1

<ion-header>
    <ion-navbar>
       <button ion-button menuToggle>
         <ion-icon name="menu"></ion-icon>
       </button>
     </ion-navbar>
</ion-header>

从您不想显示菜单栏的页面中删除此HTML代码。

Answer 2

假设你使用Menu，ToggleMenu组件，这里是你的解决方案

菜单栏内容

<ion-menu [content]="mycontent" [enabled]="customVariable">
  <ion-content>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

userEvent(){
    this.customVariable=false;
}

Answer 3

假设您的代码如下：

<ion-menu [content]="mycontent" [class.hide]="hideMenu">
 <ion-content>
   <ion-list>
     <ion-item menuClose detail-none>Close Menu</ion-item>
   </ion-list>
 </ion-content>
</ion-menu>

然后在Component的.scss文件中添加隐藏样式：

.hide{display: none !important}

最后，在.ts文件中，您可以通过更改“hideMenu”的值来控制menuToggle的显示状态，例如，

hideMenu: boolean = false; // at first the menuToggle is show
....
btnClicked(){
  this.hideMenu = !this.hideMenu;
}

Answer 4

你可以使用'ionic-angular'的事件。

在用户事件中使用此代码块：

this.events.publish("nameOfYourEvent", params)
//params => optional

订阅活动

this.events.subscribe("nameOfYourEvent",(params) => {
    //toggleMenuVisibility Code goes here
    this.hideMenu = true;
})

在视图上：

<button ion-button menuToggle *ngIf="!hideMenu">//[hidden] attribute is not working for some reason.
  <ion-icon name="menu"></ion-icon>
</button>

不要忘记从'ionic-angular'导入Events类。

从'ionic-angular'导入{Events};