如何用Angular Material自定义MatMenu替换指定元素的默认右键菜单？

完全可以实现，不用依赖MatMenuTrigger的默认触发逻辑，手动监听右键事件并控制菜单的显示位置即可，步骤如下：

核心思路 #

• 阻止目标元素的默认右键菜单行为
• 监听右键点击事件获取鼠标坐标，动态设置MatMenu的显示位置
• 手动调用MatMenu的打开/关闭方法

代码实现 #

1. 模板部分 #

在需要替换右键菜单的元素上绑定contextmenu事件，同时定义MatMenu：

<!-- 目标元素 -->
<div 
  class="target-element"
  (contextmenu)="onRightClick($event)"
>
  右键点击我
</div>

<!-- 自定义MatMenu -->
<mat-menu #rightClickMenu="matMenu">
  <button mat-menu-item>复制</button>
  <button mat-menu-item>粘贴</button>
  <button mat-menu-item>删除</button>
</mat-menu>

2. 组件TS逻辑 #

注入MatMenu实例，在右键事件中控制菜单显示位置：

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

@Component({
  selector: 'app-right-click-menu',
  templateUrl: './right-click-menu.component.html',
  styleUrls: ['./right-click-menu.component.scss']
})
export class RightClickMenuComponent {
  @ViewChild('rightClickMenu') rightClickMenu!: MatMenu;

  onRightClick(event: MouseEvent): void {
    // 阻止默认右键菜单
    event.preventDefault();
    
    // 手动打开菜单，传入鼠标位置作为坐标
    this.rightClickMenu.open({
      x: event.clientX,
      y: event.clientY
    });
  }
}

3. 样式优化（可选） #

如果菜单位置有偏移，可调整MatMenu的定位样式：

.cdk-overlay-pane.mat-menu-panel {
  position: fixed !important;
}

关于CdkMenu的说明 #

CdkMenu和MatMenu的设计定位不同，MatMenu基于CdkMenu封装但做了上层适配，直接混用会触发内部逻辑冲突。上述手动控制的方式更直接，完全适配MatMenu的样式和交互，不需要依赖CdkMenu。

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