Angular 14中如何在鼠标位置打开Material菜单(mat-menu)

要让mat-menu在鼠标点击位置而非超大容器的相对位置打开，可通过手动触发菜单并指定坐标的方式实现，具体步骤如下：

1. 修改模板结构 #

将原本通过matMenuTriggerFor自动触发的逻辑，改为通过点击事件手动触发，同时保留mat-menu定义：

<!-- 超大容器 -->
<div class="large-container" (click)="openMenuAtMouse($event)">
  <!-- 容器内部内容 -->
  <mat-menu #customMenu="matMenu">
    <button mat-menu-item>操作选项1</button>
    <button mat-menu-item>操作选项2</button>
    <button mat-menu-item>操作选项3</button>
  </mat-menu>
</div>

2. 组件内实现手动触发逻辑 #

在组件中通过MatMenuTrigger手动控制菜单打开位置，核心是获取鼠标点击时的clientX和clientY坐标，传递给菜单的打开方法：

首先导入所需依赖：

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

然后编写组件逻辑：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('customMenu') private menu!: MatMenu;
  private menuTrigger!: MatMenuTrigger;

  ngAfterViewInit(): void {
    // 初始化菜单触发器
    this.menuTrigger = new MatMenuTrigger(this.menu);
  }

  openMenuAtMouse(event: MouseEvent): void {
    // 阻止事件冒泡，避免触发容器其他点击逻辑
    event.stopPropagation();
    // 传入鼠标坐标，指定菜单打开位置
    this.menuTrigger.openMenu({
      x: event.clientX,
      y: event.clientY,
      // 可选：添加偏移量，避免菜单被鼠标指针遮挡
      offset: [8, 8]
    });
  }
}

3. 注意事项 #

• 确保你的模块中已经导入了MatMenuModule，否则mat-menu相关指令无法生效；
• 如果需要菜单在鼠标位置的特定方向（如下方、右侧）偏移，可调整offset参数的数值；
• 若原本使用了matMenuTriggerFor，可直接通过@ViewChild(MatMenuTrigger)获取触发器，无需手动实例化，逻辑保持一致。

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