gpt4 book ai didi

javascript - 如何防止 Angular Material 垫菜单关闭?

转载 作者:太空狗 更新时间:2023-10-29 16:53:34 29 4
gpt4 key购买 nike

我在 Angular Material 中创建一个日期时间选择器控件,并使用以下代码来执行此操作

<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>

目前,每当我单击一个按钮时,它都会关闭菜单。我知道我们可以在每个 mat-menu-item 上执行 $event.stoppropagation() 以防止它关闭。

但我想知道是否可以为 mat-calendar 做这件事

enter image description here

正如您在上图中看到的,目前当我选择一个日期时,它正在关闭菜单。有没有可能避免这种情况?

最佳答案

您只需将 (click) = "$event.stopPropagation()" 添加到这些日历的父元素。如下所示,

<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 .

关于javascript - 如何防止 Angular Material 垫菜单关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46967970/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com