问题描述
我试图在菜单中使用复选框选项,但我需要保持菜单打开,直到用户完成选择选项.我正在使用最新版本的 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.
这篇关于保持垫菜单打开角度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!