Angular 角度材质-如何基于目标元素动态指定上下文菜单

我有三个按钮和三个“mat菜单”菜单。用于定位上下文菜单的“div”元素具有“matMenuTriggerFor”，我尝试根据单击的按钮在组件中动态分配它。 但是，我在控制台中遇到以下错误：“matMenuTriggerFor:必须传入mat菜单实例”

这是根据上下文设置不同上下文菜单的正确方法吗

COMPONENT.HTML

    <div style="border: 1px solid green; padding: 10px;">
    <p><b>Basic Menu</b></p>
    <button id="idButton1" (click)="onContextMenu($event)">Left click to open menu programmatically</button> &nbsp;
    <button id="idButton2" (contextmenu)="onContextMenu($event)">Right click to open menu programmatically</button> &nbsp;
    <button id="idButton3" (click)="onContextMenu($event)">Left click to open menu programmatically</button> &nbsp;
  </div>

  <!-- used to position the context menu. this div has 'matMenuTriggerFor' to select which menu should be used-->
  <div #contextMenuPositioningElementHash 
    id="contextMenuPositioningElement" 
    style="position: fixed;"
    [style.left]="contextMenuPosition.x" 
    [style.top]="contextMenuPosition.y" 
    [matMenuTriggerFor]="contentMenuTriggeredFor"
    [matMenuTriggerData]="{item: item}">
  </div>

  <mat-menu #contextMenu1="matMenu">
    <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
      Action 1.1
    </button>
    <button mat-menu-item>
      <mat-icon>voicemail</mat-icon>
      Action 1.2
    </button>
  </mat-menu>

  <mat-menu #contextMenu2="matMenu">
    <!-- <ng-template matMenuContent let-item="item"> -->
      <button mat-menu-item (click)="onContextMenuAction1(item)">Action 2.1</button>
      <button mat-menu-item (click)="onContextMenuAction2(item)">Action 2.2</button>
    <!-- </ng-template> -->
  </mat-menu>

  <mat-menu #contextMenu3="matMenu">
    <!-- <ng-template matMenuContent let-item="item"> -->
      <button mat-menu-item (click)="onContextMenuAction1(item)">Action 3.1</button>
      <button mat-menu-item (click)="onContextMenuAction2(item)">Action 3.2</button>
    <!-- </ng-template> -->
  </mat-menu>

到目前为止，我发现两个问题，“contentMenuTriggeredFor”需要在Ngonint中初始化，第二个和第三个“mat菜单”有ng模板元素。我更新了问题中的代码，所以现在它工作了，但是，显示的菜单落后了一步。假设我们用“contextMenu3”初始化“contentMenuTriggeredFor”。第一次单击“idButton1”时，将显示第三个菜单。当我第二次单击时，将显示正确的（第一）菜单。然后单击“idButton2”，显示第一个菜单，第二次单击时，显示正确的（第二个）菜单。到目前为止，我发现两个问题，“contentMenuTriggeredFor”需要在ngOnInit中初始化，第二个和第三个“mat menus”有ng模板元素。我更新了问题中的代码，所以现在它工作了，但是，显示的菜单落后了一步。假设我们用“contextMenu3”初始化“contentMenuTriggeredFor”。第一次单击“idButton1”时，将显示第三个菜单。当我第二次单击时，将显示正确的（第一）菜单。然后我单击“idButton2”将显示第一个菜单，当我第二次单击时，将显示正确的（第二个）菜单。

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

@Component({
  selector: 'biq-menu-material',
  templateUrl: './biq-menu-material.component.html',
  styleUrls: ['./biq-menu-material.component.less']
})

export class BiqMenuMaterialComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.contentMenuTriggeredFor = this.contextMenu3;
  }

  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;

  @ViewChild('contextMenu1') contextMenu1: MatMenu;
  @ViewChild('contextMenu2') contextMenu2: MatMenu;
  @ViewChild('contextMenu3') contextMenu3: MatMenu;
  @ViewChild('contextMenuPositioningElementHash') contextMenuPositioningElementHash: ElementRef;

  contextMenuPosition = { x: '0px', y: '0px' };
  contentMenuTriggeredFor: MatMenu;

  onContextMenu(event: MouseEvent, item: Item) {
    event.preventDefault(); // disable browser's right click

    this.contextMenuPosition.x = event.clientX + 'px';
    this.contextMenuPosition.y = event.clientY + 'px';
    //this.contextMenu.menuData = { 'item': item };

    let targetElement = event.target as HTMLElement;
    if (targetElement.id === "idButton1") {
      this.contentMenuTriggeredFor = this.contextMenu1;
    }
    if (targetElement.id === "idButton2") {
      this.contentMenuTriggeredFor = this.contextMenu2;
    }
    if (targetElement.id === "idButton3") {
      this.contentMenuTriggeredFor = this.contextMenu3;
    }

    this.contextMenu.openMenu();
  }

  onContextMenuAction1(item: Item) {
    alert(`Click on Action 1 for ${item.name}`);
  }

  onContextMenuAction2(item: Item) {
    alert(`Click on Action 2 for ${item.name}`);
  }
}

export interface Item {
  id: number;
  name: string;
}