Angular: Как два открыть два mat-меню в одном HTML?

Question

Здесь у меня есть два меню в HTML одного компонента.Когда открывается второе matmenu (второе matmenu открыто, когда я щелкаю правой кнопкой мыши на этом div), но оно открывает первое 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>

TS

  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();
}

Answer 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 , MatMenuTrigger API и в этом посте об использовании ссылочных переменных шаблона с директивами.