Ionic2 menuToggle dynamisch ausblenden

Question

Ich verwende Ionic2 und möchte die menuToggle bei einem Benutzerereignis ein-/ausblenden. This ist, wie es in Ionic1 gemacht wird. Weiß jemand wie man es in Ionic2 macht?

Dank

Answer 1

Unter der Annahme, dass Ihr mit Menü, ToggleMenu Komponenten und hier ist Ihre Lösung

Menüleiste Inhalt

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

Entfernen Sie diesen HTML-Code aus der Seite, auf der Sie kein Menü anzeigen möchten Bar.

Answer 3

Code annehmen, wie folgend:

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

dann verstecken Stil in der .scss Datei Komponente hinzufügen:

.hide{display: none !important} 

endlich in Ihrer .ts-Datei können Sie den Anzeigezustand steuern der Wert von „HideMenu“ von menuToggle durch Änderung zum Beispiel

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

Answer 4

Sie können die Ereignisse von ‚ionischen angu verwenden Lar 'dafür.

Mit diesem Code-Block auf dem Benutzerereignis:

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

auf das Ereignis abonnieren

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

Auf der Ansicht:

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

Vergessen Sie nicht, die Ereignisse zu importieren Klasse von 'ionisch-eckig'.

Import {Ereignisse} von 'ionic-angular';