Angular中如何让MatMenuTrigger仅响应右键、不响应左键点击事件

核心思路是禁用MatMenuTrigger的默认点击触发逻辑，改为手动在右键事件中控制菜单打开：

步骤1：修改模板代码 #

调整按钮的绑定逻辑，禁用默认触发、添加菜单触发器引用，右键时手动调起菜单：

<button mat-flat-button #menuBtn2 
  (click)="yourClickLogic(element.type)" 
  [matMenuTriggerFor]="menu"
  [matMenuTriggerDisabled]="true"
  #menuTrigger="matMenuTrigger"
  (contextmenu)="$event.preventDefault(); menuTrigger.openMenu(); someMethod()">
  {{element.name}}
</button>

关键修改说明： #

• 添加[matMenuTriggerDisabled]="true"：禁用菜单默认的左键点击触发行为
• 新增模板引用#menuTrigger="matMenuTrigger"：获取MatMenuTrigger实例，用于手动控制菜单显隐
• 右键事件中补充menuTrigger.openMenu()：手动触发菜单打开

步骤2（可选）：TS代码中控制菜单 #

如果需要在组件逻辑中动态控制菜单，可通过@ViewChild获取触发器实例：

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

@Component({
  // 组件配置
})
export class YourComponent {
  @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;

  someMethod() {
    // 你的自定义逻辑
    // 也可以在这里手动控制菜单：this.menuTrigger.openMenu() / this.menuTrigger.closeMenu()
  }
}

注意：手动调用openMenu()打开的菜单依然保留MatMenu默认的点击外部自动关闭、键盘快捷键等原生能力，无需额外适配。

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