angular - 從父組件觸發子組件中的 mat-menu

我正在使用 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>

我正在我的 TypeScript 元件類別中以程式方式打開選單，如下所示。

@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 屬性。如果我從 span 中移除它，它會報錯。

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

當我執行 document.getElementById("span id").matMenuTriggerFor=my menu instance 時，也不起作用。

請提供任何建議。如需其他資訊，請告訴我。

答案＃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);
  }

}