Angular Material - 仅当条件为真时才在鼠标悬停时显示 Mat-Menu答案

【问题标题】：Angular Material - displaying Mat-Menu on mouse-over only when condition is trueAngular Material - 仅当条件为真时才在鼠标悬停时显示 Mat-Menu
【发布时间】：2020-05-07 21:53:37
【问题描述】：

快速提问。我想在鼠标悬停在带有组件标题的 div 元素上时触发 Mat-menu，但前提是某些特定条件设置为 true。

我有这样的事情：

<div class="card-header"
     [matMenuTriggerFor]="comp.RejectionDetails ? rejectionDetails : null" 
     #trigger="matMenuTrigger" (mouseenter)="trigger.openMenu()" 
     (mouseleave)="trigger.closeMenu()">
  <mat-menu #rejectionDetails [class]="'mat-menu-component'"
            [hasBackdrop]="false">
      <ng-template matMenuContent>
           <div>TEST</div>
      </ng-template>
  </mat-menu>

它似乎按预期工作，但在控制台中它抛出错误：

UniversalDynamicComponent.html:10 ERROR 错误：matMenuTriggerFor: 必须传入一个 mat-menu 实例。
Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>

我知道这是因为将空值传递给指令（当条件为假时）。但我无法为这个问题找到其他解决方案。也许有人可以帮忙？谢谢！

【问题讨论】：

标签： javascript angular angular-material material-design

【解决方案1】：

尝试在 [matMenuTriggerFor] 上而不是在 (mouseenter) 事件上设置条件：

 [matMenuTriggerFor]="rejectionDetails" 
 (mouseenter) = "comp.RejectionDetails ? trigger.openMenu() : null"

【讨论】：

你也可以用(mouseenter) = "comp.RejectionDetails && trigger.openMenu()" 写同样的内容

【解决方案2】：

在这上面花了 2-3 小时后，我发现解决这个问题的最简单的解决方法是，

定义 2 mat-menu 一个为您的正常行为和其他菜单什么都不显示。（这样做的原因是因为“matMenuTriggerFor” 不能为 false 或 null 它需要有一个 mat-menu 对象）
```
<mat-menu #sub_menu="matMenu">
  <button>menu-button 1</button>
  <button>menu-button 2</button>
</mat-menu>

<mat-menu #fake_menu="matMenu" class="fake-menu"></mat-menu>
```

现在像这样在“matMenuTriggerFor”上设置一个条件：

[matMenuTriggerFor]="your-boolean-condition ? your-normal-menu : fake-menu"

在 CSS 上只写

 ::ng-deep {
   .fake-menu {
     display: none;
   }
 }

【讨论】：