时间戳

首页 > 解决方案 > 如何防止点击时显示 mat-menu？

angular - 如何防止点击时显示 mat-menu？

问题描述

我想在鼠标悬停和鼠标移出时显示和隐藏 Mat-menu，但是如何防止在单击时显示 mat-menu？

HTML

<button mat-mini-fab color="primary" [matMenuTriggerFor]="menu"
  (mouseenter)="openMenu()">
  <img class="face" *ngIf="isLoginIn()" [src]="faceUrl">
</button>
<mat-menu #menu="matMenu">
  <div (mouseleave)="closeMenu()">
    <button class="login-menu-item" mat-flat-button color="primary">Login</button>
    <button class="login-menu-item" mat-flat-button color="">Logout</button>
  </div>
</mat-menu>

标签： angularangular-material

解决方案

您可以使用 div 而不是按钮，然后您只需要获取对 的模板引用即可在您的和事件matMenuTrigger上调用 open 和 close 方法。mouseentermouseleave

<div mat-mini-fab color="primary" #menuTrigger="matMenuTrigger [matMenuTriggerFor]="menu" (mouseenter)="menuTrigger.openMenu()">
  <img class="face" *ngIf="isLoginIn()" [src]="faceUrl">
</div>
<mat-menu #menu="matMenu">
  <div (mouseleave)="menuTrigger.closeMenu()">
    <button class="login-menu-item" mat-flat-button color="primary">Login</button>
    <button class="login-menu-item" mat-flat-button color="">Logout</button>
  </div>
</mat-menu>

修订

看起来为创建包装器DIV并将mat-menu分配matMenuTrigger给该包装器DIV将阻止通过单击顶部打开菜单MENU DIV。

<div (mouseenter)="menuTrigger.openMenu()">Menu</div>
<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
    <mat-menu #menu="matMenu" >
       <div (mouseleave)="menuTrigger.closeMenu()">
          <button mat-menu-item>Item 1</button>
          <button mat-menu-item>Item 2</button>
       </div>
    </mat-menu>
</div>

推荐阅读