如何防止在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>

我检查了this post on stack overflow，但该事件不起作用。

从文档中，他们说：

@Output() 关闭：EventEmitter

菜单关闭时发出的事件。

但我无法弄清楚如何使用此输出，以及它是否与我的需要相关。

这是stackblitz。

如何防止 mat-menu 在没有用户点击外部的情况下关闭？

Answer 1

我检查了你的 stackblitz，你可以这样做：

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

这将阻止它关闭。