如何实现Angular Mat-Menu双击触发打开？

我明白你想要把MatMenu的触发逻辑从默认的单击改成双击，之前尝试的几种方法没成功，主要是因为没处理好默认的单击事件冲突问题。下面给你一个可行的解决方案：

核心思路 #

要实现双击触发，我们需要两步：

1. 禁用MatMenuTrigger默认的单击打开/关闭行为：因为双击会触发两次单击事件，如果不禁用默认逻辑，菜单会在双击时打开又立刻关闭，导致看不到效果。
2. 绑定双击事件手动控制菜单状态：通过双击事件来决定打开或关闭菜单（根据当前状态切换）。

完整代码实现 #

模板文件（example.component.html）

<div 
  #menuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="menu"
  (dblclick)="toggleMenu()"
>
  Trigger element
</div>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

组件类文件（example.component.ts）

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;

  ngAfterViewInit(): void {
    // 覆盖默认的单击处理函数，彻底禁用单击触发菜单的逻辑
    this.menuTrigger._handleClick = () => {};
  }

  toggleMenu(): void {
    // 双击时切换菜单状态：已打开则关闭，未打开则打开
    if (this.menuTrigger.menuOpen) {
      this.menuTrigger.closeMenu();
    } else {
      this.menuTrigger.openMenu();
    }
  }
}

为什么你之前的方法没生效？ #

我们来逐个分析你尝试过的方案问题所在：

• 方法1：仅添加dblclick事件但未禁用默认单击逻辑，双击会触发两次单击，导致菜单刚打开就被关闭，视觉上看不到效果。
• 方法2：focus事件和双击需求不匹配，而且同样没处理默认单击的冲突问题，自然达不到预期。
• 方法3：同样没禁用默认单击行为，双击时先触发两次单击（可能导致菜单状态反复切换），再触发dblclick，逻辑混乱。
• 方法4：只禁用了单击打开，但没绑定双击事件来触发菜单打开，所以菜单完全无法被唤起。

可选调整 #

如果你只需要双击打开菜单，不需要双击关闭（菜单仍通过点击外部或菜单项关闭），可以把toggleMenu方法改成：

toggleMenu(): void {
  // 仅在菜单未打开时，双击才触发打开
  if (!this.menuTrigger.menuOpen) {
    this.menuTrigger.openMenu();
  }
}

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