Запускать mat-menu в дочернем компоненте из родительского компонента

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

Это все работает нормально.

Теперь для реального сценария я хочу, чтобы это контекстное меню открывалось из родительского компонента. Поэтому я переместил эту часть в 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);
  }

}