ERROR 错误：mat-menu-trigger：必须传入一个 mat-menu 实例答案

【问题标题】：ERROR Error: mat-menu-trigger: must pass in an mat-menu instanceERROR 错误：mat-menu-trigger：必须传入一个 mat-menu 实例
【发布时间】：2020-07-30 21:11:47
【问题描述】：

我正在尝试使用 mat-menu 和 matMenuTriggerFor 创建页面顶部的菜单，我在材料网站（https://material.angular.io/components/menu/examples）中找到了一个示例并尝试实现它，一切正常，但出现以下错误。

ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.
Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>"

在控制台中。我不知道原因。有人知道解决方案吗？

【问题讨论】：

你能展示你的代码吗？
@WazzaEl 我在第二个答案中发布。

标签： angular angular-material

【解决方案1】：

我知道太晚了但我有同样的错误，并使用此动态菜单Demo ，适用于使用 Angular 6 及以上版本的任何人打开您需要更改的 menuitem.component 文件这个：

  @ViewChild('childMenu') public childMenu;

到这里：

  @ViewChild('childMenu', {static: true}) public childMenu: any;

确保您制作 {static: true} 因为在我的情况下它是错误的并给我这个错误。

希望对你有帮助

【讨论】：

你拯救了我的一天！但是能解释一下它是如何工作的吗？
ViewChild 是配置视图查询的属性装饰器，static 是它的元数据属性之一，我们将其设置为 True 以在更改检测运行之前解析查询结果，请检查此 @987654322 @

【解决方案2】：

问题已解决，因此显然与材料网站中的示例无关，并且与 Muhammed 解释的情况相反。我在菜单之前有几个按钮 [matMenuTriggerFor]="home" aaand 我没有任何 mat-menu 来引用它们。我的代码是这样的：

<button mat-button [matMenuTriggerFor]="home" >Home</button>
<button mat-button [matMenuTriggerFor]="edit">Sources</button>
<button mat-button [matMenuTriggerFor]="sources">Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

我上面提到的抛出错误，现在我更改了代码并删除了前三个按钮中未使用的 [matMenuTriggerFor] 并解决了问题。工作代码是：

<button mat-button >Home</button>
<button mat-button >Sources</button>
<button mat-button >Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

【讨论】：

【解决方案3】：

我遇到了这个错误，我意识到我的问题出在 *ngIf 上。这是我的mat-menu

 <mat-menu #menu="matMenu" *ngIf="user.userType==2">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button *ngIf="user.userType==2" [matMenuTriggerFor]="menu">Hello</button>

不知何故让他感到困惑，我对材料还很初学者，但我猜他不确定当只有一个条件为真时会发生什么...... 所以我很容易将其更改为：

<div *ngIf="user.userType==2">
 <mat-menu #menu="matMenu">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button [matMenuTriggerFor]="menu">Hello</button>
</div>

【讨论】：

【解决方案4】：

当 [matMenuTriggerFor] 指令没有对 mat-menu 组件的引用（模板变量）时会出现此问题，例如这将在控制台中引发相同的错误

<button mat-button [matMenuTriggerFor]="">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

或者你可以像这样添加指令 [matMenuTriggerFor]

正确的解决方案是这样的

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

【讨论】：

感谢 Muhammed 的回复，你是对的，但我发现了问题，在我的情况下它是相反的，我将在下一个答案中解释。