如何停止在 Angular 中单击内部区域时关闭 mat-menu？

Question

在这里，我使用的是材料垫菜单，当我单击 select 时，我的选项不是垫菜单，而是自行关闭。

素材mat-menu参考链接：点击这里

图 1

图 2 - 点击后

如果我要去 select 我的选项不是下拉菜单关闭 select。 所以我想在应用按钮上关闭它。

Answer 1

您可以通过添加$event.stopPropagation();来禁用每个mat-menu-item的关闭功能； 对于onClick事件和应用按钮，您可以添加具有所需作业的真实处理程序。 因为除了应用按钮之外的所有项目都不会在点击时做出反应，应用按钮将关闭它的菜单。

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="$event.stopPropagation();">
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled (click)="$event.stopPropagation();">
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item (click)="$event.stopPropagation();">
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
  <!-- the button below will close the meny-->
  <button mat-menu-item (click)="selectOption($event)">
    <mat-icon>apply</mat-icon>
    <span>Apply</span>
  </button>
</mat-menu>

这是一个完整的例子。