Ionic5 侧边菜单 - 限制为特定视图

Question

I followed the documentation and added the menu into app.component.html as

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list no-lines width="10">
          <ion-list-header>
            <h2>MyApp</h2>
          </ion-list-header>  
          <ion-menu-toggle auto-hide="true">
            <ion-item [routerLink]="['/forecast']">
              Foo Bar
            </ion-item>
          </ion-menu-toggle>
    ....
</ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Now, that menu is accessible for all views by swiping, including the login view which it should not be. How can I limit the menu to a specific view only without breaking the ion-split-pane ?

Answer 1

Do it like this. Disable the menu by default

<ion-menu contentId="main-content" type="overlay" disabled>

And then, the view where you want to show it, put this in the controller

import { MenuController } from '@ionic/angular';

constructor(
  public menuCtrl: MenuController){
  this.menuCtrl.enable(true);
}

Answer 2

Use: MenuController to enable and disable menu.

import { MenuController } from '@ionic/angular';

constructor(private menu: MenuController) { }

ionViewWillEnter(){
   this.menu.enable(true);
   this.menu.enable(true, 'YourMenuId');  // or you can target it with your ID
}

Menu Doc: https://ionicframework.com/docs/api/menu