在对话框打开时关闭 matMenu？

Question

我在单击 matMenu 中的项目时触发了一个对话框，但问题是当对话框打开时 matMenu 不会关闭。我希望它在对话框打开后立即关闭，当您单击页面中的某个位置时它会关闭，但我希望它在对话框打开后关闭。

这是 matMenu 的代码片段。

  <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseup)="menuTrigger.closeMenu()">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu" xPosition="before" >
    <button mat-menu-item (click)="openUpdateQuestionDialog($event,currentSelectedQuestion)">
      Edit
    </button>
    <button mat-menu-item (click)="confirmDeleteQuestion($event,currentSelectedQuestion)">
      Delete
    </button>
  </mat-menu>

我正在尝试不同的方法来使其发挥作用，但没有运气。

Answer 1

有几个选项可用于关闭垫菜单（垫菜单触发器）。

从文档中，您可以通过“子”装饰器使用 ts 中的 matMenuTrigger （ViewChild或ContentChild可能基于您的菜单到功能的位置）：

class MyComponent {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.closeMenu(); // <-- put this in your dialog open method
  }
}

我没有对此进行测试，但也可以从模板中调用关闭：

<button mat-menu-item
  (click)="openUpdateQuestionDialog($event,currentSelectedQuestion) && menuTrigger.closeMenu()"
>

Answer 2

closeMenu()您可以通过调用指令来做到这一点MatMenuTrigger（请参阅此处的文档）。

就像是

<button mat-button #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

---

@ViewChild('menuTrigger') trigger;
...
this.trigger.closeMenu()

演示