Angular 离子4两侧菜单-打开特定菜单

如何打开特定菜单4双面菜单？ 例如：

<ion-menu #menuA menuId="menuA" side="start">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start 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-menu #menuB menuId="menuB" side="end" type="push">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
        <ion-item>
          zxzxz
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

当我点击工具栏按钮时，它总是打开左侧菜单。 有什么想法吗？ Tnx.

来自文档[]

您可以使用MenuController在单击时打开菜单，功能如下

html

---

完全同意达南斋派的上述回答。如果可以的话我会评论的。我只是想澄清一下。据我所知，你不能单靠菜单和菜单。如图所示，您需要显式启用所需的菜单

在ts文件中：

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

constructor(
    private menuCtrl: MenuController,
    private router: Router
  ) {}

  openMenu() {
    this.menuCtrl.enable(true, 'menuA')
    .then(myMenu => {
      // console.log(myMenu);
      this.menuCtrl.open('menuA');
    });
  }

然后在模板中：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <!--ion-menu-button autoHide="false" menu="master"></ion-menu-button-->
      <ion-button (click)="openMenu()">
        <ion-icon name="menu" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>My Devices</ion-title>
  </ion-toolbar>
</ion-header>

---

所以，如果你不想，你不需要使用离子菜单按钮。这可以很容易地扩展到使用同一页面和其他页面中的菜单UID的其他菜单。关键是在您尝试打开它之前，以编程方式启用您想要的！这在爱奥尼亚4中运行良好。

它不起作用，我尝试了此代码和爱奥尼亚文档参考，但没有成功：事件单击工具栏按钮A和事件单击工具栏按钮B仅打开第一个菜单您可以在html和相应的ts中共享工具栏代码吗？也许你错过了什么。无法从给定数据进行调试不需要这么多代码。在所有可用菜单上添加MENUD，然后您可以使用带有menu=的ion menu按钮，该按钮将自动映射到该菜单。如果您想使用自定义按钮，请将该按钮置于ion menu toggle中，然后使用menu=切换菜单。如果你想根据某种逻辑用相同的按钮打开不同的菜单，请使用@DhananjaiPai的方法。

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

constructor(
    private menuCtrl: MenuController,
    private router: Router
  ) {}

  openMenu() {
    this.menuCtrl.enable(true, 'menuA')
    .then(myMenu => {
      // console.log(myMenu);
      this.menuCtrl.open('menuA');
    });
  }

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <!--ion-menu-button autoHide="false" menu="master"></ion-menu-button-->
      <ion-button (click)="openMenu()">
        <ion-icon name="menu" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>My Devices</ion-title>
  </ion-toolbar>
</ion-header>