Закрыть 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

Существует несколько опций для закрытия меню мата (триггер меню мата).

Из документов вы можете использовать matMenuTrigger из ts через «дочерний» декоратор ( 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()

---

Демо