How to disable side menu in ionic 4?

问题

I am using, this.menuCtrl.swipeEnable(false); for ionic 3 app. This works fine for disabling the side menu. But, it doesn't work for ionic 4! Below is my ionic 4 code sample:

login.page.ts

constructor(public loginService: LoginService, private router: Router, public menuCtrl: MenuController) {
    this.menuCtrl.swipeEnable(false);
   }

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu type="push">
      <ion-header>
        <ion-toolbar color="success">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

回答1:

this.menuCtrl.enable(false);

This will also work in constructor. I am using this in an ionic v4 - beta.2 project and it works fine.

Also, I see that you are using ionic with angular so you can also OnInit lifecycle hook.

回答2:

First, swipeEnable() is now swipeGesture().

Second, I had a similar problem with the MenuController and banged my head against a wall for longer than I'll disclose before realising it'd be wise to read the ionic core docs.

I had multiple side menus each with a unique id, set to false by default, which had to be enabled on particular pages. But MenuController wasn't recognising the id's I was passing in.

Concussed to the point of unconsciousness, I opened the ionic core docs on github and learned that MenuController now looks for menu-id, not id. So:

<ion-menu menu-id="myMenu">...

grabbed by, for example:

this.menuCtrl.enable(true, 'myMenu')

works.

As always in retrospect, both the new method and the solution to finding it seem so obvious.

回答3:

Try

this.menuCtrl.enable(false);

This also seems to be answered here disable menu on login page ionic 4

回答4:

For me its work inside method ngOnInit

ngOnInit() { 
 this.menuCtrl.enable(false); // or true 
}

回答5:

Try this inside your login.page.ts

constructor(private navCrtl: NavController, private menu: MenuController) { this.menu.enable(false); }

来源：https://stackoverflow.com/questions/51802594/how-to-disable-side-menu-in-ionic-4

标签

angular

ionic-framework

ionic3

hybrid-mobile-app

ionic4