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

Question

我使用 angular 6 和 angular-material。 右键单击打开 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();
  }

一切正常。

现在，对于真正的场景，我想要的是，我希望从父组件打开这个上下文菜单。 所以我把这部分移到了 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);
  }

}