保持垫菜单打开角度 [英] keep mat-menu open angular

问题描述

我试图在菜单中使用复选框选项，但我需要保持菜单打开，直到用户完成选择选项.我正在使用最新版本的 Angular.提前致谢！

I am trying to use checkbox options in a menu, but I need to keep the menu open until the user is finished selecting options. I am using the latest version of Angular. Thank you in advance!

我将 此处 中的嵌套 mat-menu 与复选框结合起来:

I have combined the nested mat-menu from here with checkboxes:

我已经尝试过，但在选中复选框后菜单会关闭:

<mat-menu #worldtest="matMenu" md-prevent-menu-close="md-prevent-menu-close">
     <section><mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox></section>
     <section><mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox></section>
</mat-menu>

推荐答案

当您在 mat-menu 上使用复选框(或任何响应点击的交互式元素)时，并且您不希望菜单关闭时单击它，您需要通过使用 MouseEvent.stopPropagation() 停止菜单来防止菜单接收单击事件.尝试这样的事情:

When you use a checkbox (or any interactive element that responds to clicks) on a mat-menu, and you don't want the menu to close when you click it, you need to prevent the menu from receiving the click event by stopping it with MouseEvent.stopPropagation(). Try something like this:

<mat-checkbox (click)="$event.stopPropagation()">Check Me</mat-checkbox>

md-prevent-menu-close 功能来自用于 AngularJS 的旧 Angular Material - Angular Material (v6) 的最新版本"没有该功能.Angular Material(用于 AngularJS 的 v1.x)和 Angular Material2(用于 Angular 的 v2/5/6)不可互换.

The md-prevent-menu-close feature is from the old Angular Material for AngularJS - the 'latest version' of Angular Material (v6) doesn't have that feature. Angular Material (v1.x for AngularJS) and Angular Material2 (v2/5/6 for Angular) are not interchangeable.

这篇关于保持垫菜单打开角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！