Question

我正在将角度材料与角度6配合使用。右键单击打开matMenu，将其用作上下文菜单。我当前的代码如下所示。

<span #contextMenuTrigger [matMenuTriggerFor]="contextMenu"></span>
<button (contextmenu)="openContextMenu($event)" mat-button >Open Context Menu</button>
<mat-menu #contextMenu="matMenu">
    <ng-container *ngFor="let item of config.items">
      <button mat-menu-item [matMenuTriggerFor]="submenu" (click)="actionSelected(item.label)">{{ item.label }}</button>
      <mat-menu #submenu="matMenu">
         <button *ngFor="let subItem of item.submenu" mat-menu-item (click)="actionSelected(subItem.label)">{{ subItem.label }}</button>
      </mat-menu>
    </ng-container>
  </mat-menu>

我正在像这样在我的打字稿组件类中以编程方式打开菜单。

@ViewChild('contextMenuTrigger', {read: MatMenuTrigger}) contextMenuTrigger:MatMenuTrigger;

  ngOnInit() {

  }

  openContextMenu(e) {
    e.preventDefault();
    this.contextMenuTrigger.openMenu();
  }

一切正常。

现在，对于真实的场景，我想要的是，我希望从父组件打开此contextmenu。所以我把这部分移到了app.component.html

<span #contextMenuTrigger [matMenuTriggerFor]="contextMenu"></span>
    <button (contextmenu)="openContextMenu($event)" mat-button >Open Context Menu</button>

我使用EventEmitter将MatMenu的实例即contextMenu传递给父级。

但是我的问题是如何在父组件中分配matMenuTriggerFor属性。如果我将其从其给出的错误中删除。

AppComponent.html:1 ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.

当我做document.getElementById("span id").matMenuTriggerFor = my menu instance时也无法正常工作。

请提出任何建议。让我知道是否需要进一步的信息。

Answer 1

为了确保我正确阅读了您的问题，我假设您的方法openContextMenu()在子组件中？如果是这样，则可以在父级组件中使用ViewChild以便从父级访问该方法。像这样：

父代码：

import { Component, ViewChild } from '@angular/core';

import { ChildComponent } from '/path/to/child.component';

@Component({})
export class ParentComponent {

  @ViewChild(ChildComponent) childComponent: ChildComponent;

  onClick(event) {
    childComponent.openContextMenu(event);
  }

}

从父组件触发子组件中的mat-menu

1 个答案: