Как предотвратить закрытие меню материала без разрешения пользователя в angular 7

Question

У меня есть mat-menu, содержащий несколько флажков, и я хочу, чтобы пользователь закрыл его, когда он проверяет все типы фильтров, которые он хочет.

Реальное поведение - когда вы нажимаете на что-либо, оно будетавтоматически закрывается.

У меня есть этот код:

<button color="warn" mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By LM
    </mat-checkbox>&nbsp;
  </button>
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By UN
    </mat-checkbox>&nbsp;
  </button>
</mat-menu>

Я проверил это сообщение о переполнении стека , но событие не сработало.

И из документации они сказали:

@ Выход () закрыт: EventEmitter

Событие, генерируемое при закрытии меню.

Но яне в состоянии понять, как использовать этот вывод, и если он даже имеет отношение к тому, что мне нужно.

Вот stackblitz .

Как предотвратить матзакрытие меню без щелчка пользователем за его пределами?

Answer 1

Я проверил ваш стек, и вы можете сделать:

<button mat-menu-item (click)="$event.stopPropagation();">

Это предотвратит его закрытие.