Как запретить показывать мат-меню при нажатии?

Question

Я хочу показать и скрыть меню Mat при наведении курсора мыши, но как запретить показ меню при нажатии?

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>

Revision

Похоже, что создание оболочки 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>