如何在鼠标移出时关闭mat-menu且避免出现闪烁问题

实现方案 #

你遇到的闪烁问题根本原因是：直接绑定按钮的mouseleave事件触发关闭时，若用户试图将鼠标移入菜单区域，会先触发按钮的mouseleave关闭菜单，紧接着触发菜单区域的mouseenter再次打开菜单，由此产生来回闪烁。
你可以通过增加短延时缓冲+悬停状态标记的方式解决该问题，具体实现如下：

1. 组件类定义变量

// 菜单关闭定时器
private menuCloseTimer: NodeJS.Timeout | null = null;
// 标记是否悬停在按钮/菜单区域
private isHoverOnTarget: boolean = false;

2. 模板绑定事件

给触发按钮和mat-menu分别绑定对应的鼠标事件：

<!-- 触发按钮 -->
<button
  mat-icon-button
  [matMenuTriggerFor]="homeMenu"
  #menuTrigger="matMenuTrigger"
  (mouseenter)="handleMouseEnter()"
  (mouseleave)="handleMouseLeave()"
>
  <mat-icon>home</mat-icon>
</button>

<!-- 菜单面板 -->
<mat-menu
  #homeMenu="matMenu"
  (mouseenter)="handleMouseEnter()"
  (mouseleave)="handleMouseLeave()"
>
  <button mat-menu-item>首页</button>
  <button mat-menu-item>个人中心</button>
  <button mat-menu-item>设置</button>
</mat-menu>

3. 实现事件处理方法

// 注入MatMenuTrigger实例
@ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;

handleMouseEnter() {
  // 进入目标区域时，清空关闭定时器，避免误关
  if (this.menuCloseTimer) {
    clearTimeout(this.menuCloseTimer);
    this.menuCloseTimer = null;
  }
  this.isHoverOnTarget = true;
  // 打开菜单
  this.menuTrigger.openMenu();
}

handleMouseLeave() {
  // 离开目标区域时，启动延时关闭
  this.menuCloseTimer = setTimeout(() => {
    this.isHoverOnTarget = false;
    this.menuTrigger.closeMenu();
  }, 150); // 150ms的缓冲时间足够完成鼠标从按钮到菜单的移动，可按需调整
}

该方案通过缓冲时间规避了按钮和菜单之间的鼠标移动间隙触发的误关闭，从根本上解决了闪烁问题，同时满足鼠标移出按钮且未进入菜单时自动关闭的需求。

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