本文介绍了如何防止角材料垫菜单关闭?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在角度材料中创建一个日期时间选择器控件,并使用以下代码来执行此操作
<mat-icon>date_range</mat-icon><span>日期范围</span>按钮><mat-menu #menu="matMenu"><div fxLayout="row"><div fxLayout="列"><button (click)="setInterval(15)" mat-menu-item>过去 15 分钟</button><button (click)="setInterval(360)" mat-menu-item>过去 6 小时</button><button (click)="setInterval(1440)" mat-menu-item>过去 24 小时</button><button (click)="setInterval(2880)" mat-menu-item>过去 2 天</button><button (click)="setInterval(10080)" mat-menu-item>过去 7 天</button><button (click)="setInterval(-1)" [matMenuTriggerFor]="dateTimeMenu" mat-menu-item>自定义</button>
<mat-menu class="date-range-menu" #dateTimeMenu="matMenu"><div fxLayout="row"><div fxLayout="列"><b>来自</b><mat-calendar></mat-calendar>
<div fxLayout="列"><b>到</b><mat-calendar></mat-calendar>
</mat-menu>
</mat-menu>
目前,当我点击一个按钮时,它正在关闭菜单.我知道我们可以在每个 mat-menu-item 上执行 $event.stoppropagation() 以防止它关闭.
但我想知道是否可以为 mat-calendar 做到这一点
正如您在上图中所看到的,当我选择一个日期时,它正在关闭菜单.有没有可能阻止这种情况?
解决方案
您只需将 (click) = "$event.stopPropagation()"
添加到这些日历的父元素.如下图,
<div fxLayout="row"><div fxLayout="column" (click)="$event.stopPropagation();"><b>来自</b><mat-calendar></mat-calendar>
<div fxLayout="column" (click)="$event.stopPropagation();"><b>到</b><mat-calendar></mat-calendar>
</mat-menu>
Stackblitz 演示.
I'm creating a date time picker control in the angular material and having the below code to do that
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>date_range</mat-icon>
<span>Date Range</span>
</button>
<mat-menu #menu="matMenu">
<div fxLayout="row">
<div fxLayout="column">
<button (click)="setInterval(15)" mat-menu-item>Last 15 minutes</button>
<button (click)="setInterval(360)" mat-menu-item>Last 6 hours</button>
<button (click)="setInterval(1440)" mat-menu-item>Last 24 hours</button>
<button (click)="setInterval(2880)" mat-menu-item>Last 2 days</button>
<button (click)="setInterval(10080)" mat-menu-item>Last 7 days</button>
<button (click)="setInterval(-1)" [matMenuTriggerFor]="dateTimeMenu" mat-menu-item>Custom</button>
</div>
<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>
</div>
</mat-menu>
Currently when ever I click a button it is closing the menu. I know we can do $event.stoppropagation() on each mat-menu-item to prevent it from closing.
But I want to know is it possible to do that for mat-calendar
As you can see in the above image currently when i select a date it is closing the menu. Is it possible to prevent that?
解决方案
You just add (click) = "$event.stopPropagation()"
to the parent element of these calendars. Like below,
<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>
Stackblitz demo.
这篇关于如何防止角材料垫菜单关闭?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
07-25 16:40