Question

我想在鼠标悬停和鼠标移出时显示和隐藏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>

Answer 1

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

<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将阻止通过单击顶部的{{1} }。

MENU DIV

Answer 2

我也不希望单击鼠标打开菜单。我只想以编程方式控制它。

我通过应用css-rule pointer-events: 'none'解决了该问题，该规则告诉HtmlElement如果用户与之交互，则不发出点击事件。作为matMenuTriggerFor伪指令listens for click events，它将不会打开。

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

如何防止点击时显示垫菜单？

2 个答案: