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

您可以通过在closeMenu()指令上调用MatMenuTrigger来做到这一点（有关文档，请参见here）。

类似

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

Demo

Answer 2

有两个选项可以关闭mat菜单（mat菜单触发器）。

From the docs，您可以通过“子”修饰符（可能基于菜单在功能上的位置，ViewChild或ContentChild）从ts使用matMenuTrigger：

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()"
>

关闭对话框上的matMenu打开？

2 个答案: