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

到目前为止，我遇到的唯一问题是，有时在将鼠标快速移至下拉菜单项上时会有些停顿，但是对我来说这是值得权衡的。

Angular（2+？）在悬停时在8，打开和关闭材质垫菜单上进行了测试[解决方案]

1 个答案: