如何防止在单击时显示 mat-menu？

Question

我想在鼠标悬停和鼠标悬停时显示和隐藏垫菜单，但是如何防止在单击时显示垫菜单？

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>

Answer 1

你可以使用一个div，而不是一个按钮，那么你就只需要得到一个模板参考matMenuTrigger打电话给您的打开和关闭方法mouseenter和mouseleave事件。

<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>

修订

看起来像为mat-menu创建包装DIV并将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>

Answer 2

我也不希望在鼠标点击时打开一个垫菜单。 我想以编程方式单独控制它。

我已经通过应用 css-rule pointer-events: 'none'解决了这个问题，它告诉 HtmlElement 如果用户与其交互，则不要发出点击事件。 由于matMenuTriggerFor指令侦听单击事件，因此它不会打开。

<div [ngStyle]="{cursor: 'pointer'}">
  <div [matMenuTriggerFor]="menu" [ngStyle]="{'pointer-events': 'none'}">
    <!-- Your Content -->
  </div>
</div>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Foo<button>
  <button mat-menu-item>Bar<button>
  <button mat-menu-item>Baz<button>
</mat-menu>