Ionic2 menuToggle hide動的に

Question

私はIonic2を使用しており、ユーザーイベントでmenuToggleを表示/非表示にしたいと考えています。 Thisは、それがIonic1でどのように行われたかです。誰もがIonic2でそれを行う方法を知っていますか？

おかげ

Answer 1

はあなたのメニュー、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 2

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

がから、このHTMLコードを削除していると仮定すると、あなたがメニューを表示したくないページ - バー。

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> 

[コンポーネントの.scssファイルで非表示スタイルを追加：あなたの.TSファイルで、あなたが表示状態を制御することができ、最後に

.hide{display: none !important} 

例えば、「hideMenu」の値を変更することによって、menuToggleの値を変更することができます。例えば、

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

Answer 4

「ionic-anguラル 'それ。

ユーザーイベントに、このコードブロックを使用します。

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> 

がイベントをインポートすることを忘れないでください。クラス「イオン角」から。

import {Events} from 'ionic-angular';