javascript - Angular Material - 隐藏按钮鼠标左键上的菜单

Question

我得到了在按钮的 mouseenter 事件上显示的菜单。工具栏中的所有内容:

<mat-toolbar color="primary">
  <button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
      #matMenu1Trigger="matMenuTrigger"
      (mouseenter)="matMenu1Trigger.openMenu()">Menu1
  </button>
  <mat-menu #menu1="matMenu">
    <div (mouseleave)="matMenu1Trigger.closeMenu()">
      <button mat-menu-item>Item 1</button>
    </div>
  </mat-menu>
</mat-toolbar>

当周围范围的 mouseleave 事件发生时，菜单关闭，到目前为止一切顺利。现在我想通过添加来关闭触发按钮的 mouseleave 上的菜单

(mouseleave)="matMenu1Trigger.closeMenu()"

当我执行此操作并将鼠标移到该按钮上时，菜单开始闪烁，就像它每隔几毫秒打开/关闭一样。

为什么会这样以及当鼠标离开按钮时如何隐藏菜单？

https://stackblitz.com/edit/angular-kd8bue

编辑:经过一番谷歌搜索后，我发现此行为是由打开菜单时显示的覆盖层引起的，如下所述 How to open mat-menu on a single click and close other opened menu if there is any? 。由于覆盖，不确定我想要实现的目标是否可能......

Answer 1

请在 github 上查看此已关闭的问题

https://github.com/angular/material2/issues/10378#issuecomment-372626596

当您的 mouseenter 打开 mat-menu... 会创建一个 cdkOverlay 并将焦点设置到 mat-menu cdkOverlay，这立即触发您的 mouseleave 事件，因为焦点现在位于覆盖层上，而不是您的按钮上...即使您的鼠标仍在按钮上。

<小时/>

修订

请查看我为此答案所做的以下 stackblitz。

How to open and close Angular mat menu on hover

https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html