Ionic 4 双面菜单 - 打开特定菜单答案

【问题标题】：Ionic 4 both sides menu - open specific menuIonic 4 双面菜单 - 打开特定菜单
【发布时间】：2019-05-07 09:57:23
【问题描述】：

如何打开特定菜单 Ionic 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。

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

来自文档 [https://ionicframework.com/docs/api/menu/]

你可以使用 MenuController 来打开菜单，比如这样的功能

html

<ion-menu side="start" menuId="first">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu 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-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

在 TS 中

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

@Component({
  selector: 'menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['./menu-example.css'],
})
export class MenuExample {

constructor(private menu: MenuController) { }

  openFirst() {
    this.menu.enable(true, 'first');  // replace with MenuA for your case
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end'); //replace with MenuB
  }
}

【讨论】：

它不起作用，我已经尝试过这段代码和离子文档参考但没有成功：事件点击工具栏按钮 A 和事件点击工具栏按钮 B 只打开第一个菜单
可以分享一下html中的工具栏代码和对应的ts吗？可能是你错过了一些东西。无法从给定的数据进行调试
不需要那么多代码。在所有可用菜单上添加menuId，然后您可以使用ion-menu-button 和menu=<menuId>，该按钮将自动映射到该菜单。如果您想使用自定义按钮，请将该按钮放入 ion-menu-toggle 并再次使用 menu=<menuId> 切换菜单。如果你想基于某些逻辑用相同的按钮打开不同的菜单，请使用@DhananjaiPai 的方法。

【解决方案2】：

完全同意上述#Dhananjai Pai 的回答。如果可以的话，我会发表评论。只是为了澄清。据我所知，您不能仅依赖 menuId 和 menu 。如您所见，您需要明确启用所需的菜单。

在你的 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>

因此，如果您不想使用离子菜单按钮，则无需使用。这可以很容易地扩展到在同一页面和其他页面中使用其他菜单（使用它们的 menuId）。关键是在您尝试打开它之前以编程方式启用您想要的那个！这在 Ionic 4 中运行良好。

【讨论】：