Angular（2+？）在 8 上测试，悬停时打开和关闭材质 mat-menu [解决方案]

Question

我进行了大量搜索，试图找到一种干净的方式来悬停材质菜单以显示其菜单选项，但不幸的是，我找到的解决方案似乎有点过于复杂，或者直接不起作用.因此，我使用我发现的部分内容创建了自己的解决方案，并添加了我自己的一些逻辑。你可以在下面找到答案！

Answer 1

这是堆栈闪电战：https://stackblitz.com/edit/angular-d56h4m

至于解释，我只是在 (mouseenter) 和 (mouseleave) 侦听器上添加了一些额外的逻辑，这些逻辑只是检查鼠标是否真的离开了主菜单按钮或菜单项，但延迟非常小。这只是一个简单的版本，但我相信您可以根据需要对其进行扩展。

app.component.html：

<button 
  mat-button [matMenuTriggerFor]="menu" 
  #menuTrigger="matMenuTrigger" 
  (mouseenter)="openResourceMenu(); recheckIfInMenu = true" 
  (mouseleave)="closeResourceMenu(); recheckIfInMenu = false"> Resources
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">
  <span 
  (mouseenter)="recheckIfInMenu = true" 
  (mouseleave)="closeResourceMenu(); recheckIfInMenu = false">
    <button mat-menu-item>
      Buyers
    </button>
    <button mat-menu-item>
      Sellers
    </button>
  </span>
</mat-menu>

app.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatMenuTrigger} from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
  recheckIfInMenu: boolean;

  ngOnInit() {
    this.recheckIfInMenu = false;
  }

  openResourceMenu() {
    this.trigger.openMenu();
  }

  closeResourceMenu() {
    setTimeout(() => {
      if (this.recheckIfInMenu === false) {
        this.trigger.closeMenu();
      }
    }, 175);
  }

}

styles.css：

.cdk-overlay-container{
    top:67px;
}
.cdk-overlay-connected-position-bounding-box{
    top:0 !important;

}

别忘了也导入菜单模块！

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

帮助我工作的最重要的事情是延迟检查鼠标是否仍在菜单中，我将其设置为 175 毫秒。通过这样做，菜单将停留片刻，允许用户在菜单本身关闭之前将其放入菜单项。它还会检查何时从菜单按钮本身离开并正确关闭菜单，这是其他解决方案所缺乏的。

让我走上这条道路的其他链接：

How to open and close Angular mat menu on hover

How to make Material Design Menu (mat-menu) hide on mouseleave

到目前为止，我遇到的唯一问题是有时将鼠标快速移动到下拉项目上时会出现轻微的卡顿，但对我来说这是值得的权衡。