angular - 使用 MatMenuTrigger 上的 ViewChild 以编程方式打开 Angular Material 菜单

Question

如何使用按钮触发器上的模板引用变量以编程方式打开 Angular Material 菜单，该按钮在组件中使用 ViewChild 访问？

菜单通常在点击时打开，但我想在鼠标悬停时以编程方式打开它。

(鼠标悬停)事件处理程序给出错误:无法读取未定义的属性“openMenu”。

那么为什么组件中没有定义clickHoverMenuTrigger呢？

这是组件 html

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
  #clickHoverMenuTrigger (mouseover)="openOnMouseOver()">
  <mat-icon>notifications</mat-icon>
</button>

这是组件 typescript

@ViewChild(MatMenuTrigger) clickHoverMenuTrigger: MatMenuTrigger;

openOnMouseOver() {
  this.clickHoverMenuTrigger.openMenu();
}

此方法记录在此处 https://material.angular.io/components/menu/overview

这里提出并回答了同样的问题 How do I access mat menu trigger from typescript (我没有资格对此发表评论)

看起来我正在做的正是上面文档和 StackOverflow 解决方案中所述的内容。

由于 clickHoverMenuTrigger 未定义，这一定是 @ViewChild 的问题。

Stackblitz 上的代码.打开控制台查看错误。

Answer 1

只需将 @ViewChild 更改为

@ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger;

整体代码应该是:

<h1>2 buttons, 2 Menus</h1>

<ol>
  <li>Standard Material Button opens menu on click </li>
  <li>Same, but with event handler to open menu on mouseover</li>
</ol>

<button mat-icon-button [matMenuTriggerFor]="clickMenu"
  #clickMenuTrigger="matMenuTrigger">
  <mat-icon>touch_app</mat-icon>
</button>

<button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
  #clickHoverMenuTrigger="matMenuTrigger" (mouseover)="openOnMouseOver()">
  <mat-icon>notifications</mat-icon>
</button>

<mat-menu #clickMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<mat-menu #clickHoverMenu="matMenu">
  <button mat-menu-item>New items</button>
</mat-menu>

:

export class AppComponent {

  @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger;

  openOnMouseOver() {
    this.clickHoverMenuTrigger.openMenu();
  }
}

DEMO