Question

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

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

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

那么为什么在组件中未定义clickHoverMenuTrigger？

这是组件html

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

这是组件打字稿

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

ts：

export class AppComponent {

  @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger;

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

DEMO

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

1 个答案: