Angular：如何在一个 HTML 中打开两个 mat-menu？答案

【问题标题】：Angular : How two open two mat-menu in one HTML?Angular：如何在一个 HTML 中打开两个 mat-menu？
【发布时间】：2026-01-20 03:15:01
【问题描述】：

这里我在一个组件的 HTML 中有两个 matmenus。当打开第二个 matmenu（当我右键单击该 div 时打开第二个 matmenu）但它打开了第一个 matmenu 那么如何在不同的角度单击时以不同的方式打开一个组件 HTML 中的两个菜单？

HTML

(this is first menu)
<mat-icon style="cursor: pointer;" [matMenuTriggerFor]="menu">more_vert   
  <mat-menu #menu="matMenu"> 
    <button mat-menu-item (click)="addNewItem()">New Folder</button>
    <button mat-menu-item (click)="uploadFiles()">Upload Files</button>
  </mat-menu> 
</mat-icon>

(This is second menu)

<mat-card *ngFor="let imagespayload of uploadedImagesObj"(click)="activeFolder=imagespayload"
   (contextmenu)="onContextMenu($event, imagespayload)">

   <div style="position: fixed"
     [style.left]="contextMenuPosition.x"
     [style.top]="contextMenuPosition.y"
     [matMenuTriggerFor]="contextMenu"
     [matMenuTriggerData]="{item: imagespayload}">
   </div>

  <mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent let-item="item">
      <button mat-menu-item>Action 1</button>
      <button mat-menu-item>Action 2</button>
    </ng-template>
  </mat-menu>

  import { Component, OnInit, Input,ViewChild } from '@angular/core';
  import { MatMenuTrigger } from '@angular/material';

  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
  contextMenuPosition = { x: '0px', y: '0px' };

 onContextMenu(event: MouseEvent, imagespayload) {
   event.preventDefault();
   this.contextMenuPosition.x = event.clientX + 'px';
   this.contextMenuPosition.y = event.clientY + 'px';
   this.contextMenu.menuData = { imagespayload};
   this.contextMenu.openMenu();
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

第一个菜单打开而不是第二个，因为@ViewChild() 绑定到与给定选择器匹配的第一个指令，在本例中是第一个菜单的 matMenuTrigger。要将其绑定到您的第二个菜单触发器，请在带有触发器的元素上使用模板引用变量：

<div #trigger="matMenuTrigger"
    style="position: fixed"
    [style.left]="contextMenuPosition.x"
    [style.top]="contextMenuPosition.y"
    [matMenuTriggerFor]="contextMenu"
    [matMenuTriggerData]="{item: imagespayload}">
</div>

然后，在您的 .ts 中：

@ViewChild('trigger') trigger: MatMenuTrigger;

this.trigger.openMenu();

如需参考，请参阅Angular ViewChild documentation、MatMenuTrigger API 和this post，了解如何将模板引用变量与指令一起使用。

【讨论】：