[英]How to stop close mat-menu on click inside area in Angular?
Here i am using a material mat-menu, when i am click to select my option than mat-menu is close it self.在这里,我使用的是材料垫菜单,当我单击 select 时,我的选项不是垫菜单,而是自行关闭。
Reference link of material mat-menu: Click Here素材mat-menu参考链接:点击这里
Image 1图 1
Image 2 - After click图 2 - 点击后
If i am going to select my option than dropdown is close on select.如果我要去 select 我的选项不是下拉菜单关闭 select。 So i want close that on Apply button.所以我想在应用按钮上关闭它。
You can disable closing for each mat-menu-item
by adding $event.stopPropagation();
您可以通过添加$event.stopPropagation();
来禁用每个mat-menu-item
的关闭功能; for onClick
event and for your Apply button you can add a real handler with required job.对于onClick
事件和应用按钮,您可以添加具有所需作业的真实处理程序。 Because all items besides the Apply button won't react on click, the Apply button will close it the menu.因为除了应用按钮之外的所有项目都不会在点击时做出反应,应用按钮将关闭它的菜单。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.