时间戳

首页 > 解决方案 > 使用 MatMenuTrigger 上的 ViewChild 以编程方式打开 Angular 材质菜单

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

问题描述

如何使用按钮触发器上的模板引用变量以编程方式打开 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

在这里提出并回答了同样的问题如何从打字稿访问 mat 菜单触发器（我没有对此发表评论的声誉）

看起来我正在按照文档和上面的 StackOverflow 解决方案中的说明进行操作。

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

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

标签： angulartypescriptangular-materialmaterial-design

解决方案

只需更改@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();
  }
}

演示

推荐阅读