Ioniq 5 侧面菜单 - 仅限于特定视图

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

使用：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

Answer 2

这样做。默认禁用菜单

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

然后，要显示的视图，将其放入控制器中

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

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

Ioniq 5 侧面菜单 - 仅限于特定视图

Ionic5 side menu - limit to specific view

html

angularjs

ionic-framework

ionic4

ionic5