我要在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-菜单项执行$event.stopPropagation()以防止其关闭.

但我想知道有没有可能为mat calendar做到这一点

enter image description here

正如你在上图中看到的,当我 Select 一个日期时,它正在关闭菜单.有可能防止吗?

推荐答案

您只需将(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美元.

Angular相关问答推荐

接收错误NullInjectorError:R3InjectorError(_AppModule)[config—config]....>过度安装Angular—Markdown—Editor

Change上的Angular 自定义控件无法正常工作

按Angular 从组件的 bootstrap 选项卡中删除活动类

图像未显示在视图屏幕上-Angular 投影

在Drective Composure API中使用指令输出

Angular 17:延迟加载带参数的独立组件?

对Angular 为17的路径使用AuthGuard

Angular将文件作为字符串读取给dxf解析器

使用指令的 Angular 自定义验证在 ng-change 中无法正常工作

如何让 ag-Grid 事件读取私有方法?

错误:服务或构建Angular 项目时模块构建失败

如何在独立组件中导入Angular innerHTML

PrimeNG 避免在同一位置使用不同键的 cogo toast 重叠

在 Angular material 表单元格中渲染 html

无法将项目从 Angular 13 更新到 14

Angular:显示带有嵌套子项的内容投影

将 html ngModel 值传递给服务 --Angular

如何使用Angular4通过元素ID设置焦点

如何在angular 5 中获取基本网址?

如何对 *ngFor 应用数量限制?