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

Question

我按照文档操作并将菜单添加到app.component.html中，如下所示

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

现在，所有视图都可以通过滑动访问该菜单，包括不应该显示的登录视图。如何在不破坏ion-split-pane的情况下将菜单限制为特定视图？

Answer 1

像这样做。默认情况下禁用菜单

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

然后，您想要显示它的视图，将这个放在控制器中

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

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

Answer 2

使用：MenuController启用和禁用菜单。

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
}

菜单文档：https://ionicframework.com/docs/api/menu