mat-tree节点左键误触发mat-menu，如何仅右键呼出菜单并保留原有左键事件

问题根因 #

你当前的问题是[matMenuTriggerFor]指令默认会监听宿主元素的左键点击事件触发菜单，才会出现左键点击节点也呼出菜单的情况。

修复步骤 #

1. 调整模板绑定 #

做两处修改即可：

• 给所有绑定了[matMenuTriggerFor]的元素新增[matMenuTriggerDisabled]="true"属性，禁用默认的左键触发逻辑，原有手动调用打开菜单的能力不受影响
• 修改contextmenu事件的传参，把当前节点的菜单触发器实例、当前节点传入方法，避免多节点场景下只能打开第一个节点菜单的问题

修改后的核心模板示例：

<!-- 普通节点修改示例 -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
  (click)="selectednode = node" 
  (contextmenu)="onRightClick($event, menuTrigger, node)"
  [matMenuTriggerFor]="menu1" 
  #menuTrigger="matMenuTrigger"
  [matMenuTriggerDisabled]="true"
  [ngClass]="{ 'background-highlight':selectednode === node }">
  <!-- 内部原有内容不变 -->
  <mat-menu #menu1="matMenu">
    <!-- 菜单内容不变 -->
  </mat-menu>
</mat-tree-node>

<!-- 嵌套节点修改示例 -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <div class="mat-tree-node" 
    (contextmenu)="onRightClick($event, menuTrigger, node)"
    (click)="selectednode = node"
    [matMenuTriggerFor]="menu1"
    #menuTrigger="matMenuTrigger"
    [matMenuTriggerDisabled]="true"
    [ngClass]="{ 'background-highlight':selectednode === node }">
    <!-- 内部原有内容不变 -->
  </div>
  <mat-menu #menu1="matMenu">
    <!-- 菜单内容不变 -->
  </mat-menu>
</mat-nested-tree-node>

2. 调整TS逻辑 #

删除原来的@ViewChild获取触发器的代码，修改右键点击方法直接使用传入的触发器实例：

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

export class MytreeComponent  {
  // 删除原有@ViewChild(MatMenuTrigger)声明

  onRightClick(event: MouseEvent, menuTrigger: MatMenuTrigger, node: any){
    event.preventDefault();
    // 可选：右键点击时同步把当前节点设为选中态，和左键点击逻辑对齐
    this.selectednode = node;
    menuTrigger.openMenu();
  }

  // 其他原有逻辑保留不变
}

效果验证 #

修改完成后，左键点击节点只会触发选中、展开/折叠、点击Set Properties等原有逻辑，不会弹出菜单；右键点击节点才会呼出对应节点的菜单，完全符合需求。

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