Angular Material 5双菜单切换需双击：如何实现直接打开？

问题原因 #

Angular Material菜单组件的默认行为是：点击非当前已打开菜单的触发器时，只会关闭已打开的菜单，不会自动触发新菜单的打开，因此需要两次点击才能完成菜单切换。

解决方案 #

通过手动控制菜单触发器的状态，实现一次点击直接切换到目标菜单：

1. 修改模板代码：为两个菜单触发器添加模板引用变量，给第二个触发器绑定点击事件并传入触发器引用：

<div style="display: flex; justify-content: space-between">
  <!-- First menu -->
  <div class="col-xs-6">
    <button mat-icon-button [matMenuTriggerFor]="menu" #trigger1="matMenuTrigger">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
      <button mat-menu-item disabled>
        <mat-icon>voicemail</mat-icon>
        <span>Check voicemail</span>
      </button>
      <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Disable alerts</span>
      </button>
    </mat-menu>
  </div>
  <div class="col-xs-6">
    <!-- Second menu -->
    <button mat-icon-button [matMenuTriggerFor]="menu2" #trigger2="matMenuTrigger" (click)="switchMenu(trigger2, trigger1)">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu2="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
      <button mat-menu-item disabled>
        <mat-icon>voicemail</mat-icon>
        <span>Check voicemail</span>
      </button>
      <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Disable alerts</span>
      </button>
    </mat-menu>
  </div>
</div>

2. 组件类添加切换逻辑：导入MatMenuTrigger，实现菜单切换方法：

import { Component } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'menu-icons-example',
  templateUrl: 'menu-icons-example.html',
  styleUrls: ['menu-icons-example.css'],
})
export class MenuIconsExample {
  switchMenu(targetTrigger: MatMenuTrigger, otherTrigger: MatMenuTrigger): void {
    // 若另一个菜单处于打开状态，先关闭它
    if (otherTrigger.menuOpen) {
      otherTrigger.closeMenu();
    }
    // 打开目标菜单
    targetTrigger.openMenu();
  }
}

扩展说明 #

如果需要支持更多数量的菜单，可以维护一个所有触发器的数组，点击时遍历关闭其他已打开的菜单，再打开当前目标菜单，逻辑类似。

内容的提问来源于stack exchange，提问作者DEV