Question

我有三个按钮和三个“ mat-menu”菜单。用于定位上下文菜单的“ 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>

COMPONENT.TS

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

Angular Material-如何基于目标元素动态分配上下文菜单

0 个答案: