如何防止角料mat-menu关闭？

Question

我正在角度材料中创建一个日期时间选择器控件,并使用下面的代码来执行此操作

<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做到这一点

正如您在上面的图像中看到的那样,当我选择日期时,它正在关闭菜单.是否有可能阻止这种情况？

Answer 1

您只需添加(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演示.

Answer 2

你有很多选择，我邀请你尝试以下

    <mat-menu [hasBackdrop]="false">
     <div  (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
     ...
     </div>
    </mat-menu>

[ hasBackdrop ]="false"如果您想防止在单击框外任意位置时关闭 mat-menu，否则将其删除

Answer 3

通过返回之前的解决方案，将指令封装在方法中允许不关闭菜单并继续执行指令

在 HTML 中：

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column" (click)="doSomething($event);">
            <b>From</b>
            <mat-calendar></mat-calendar>
        </div>
        <div fxLayout="column" (click)="doSomething($event)">
            <b>To</b>
            <mat-calendar></mat-calendar>
        </div>
    </div>
</mat-menu>

在 TS：

doSomething($event:any){
    $event.stopPropagation();
    //Another instructions
}

Answer 4

如果您想停止关闭 mat-menu，即使单击 mat-menu-content，我也会进行修改，添加到$event.stopPropogation()锚标记而不是 mat-menu 上。因此，即使单击表单上的任意位置，菜单对话框也不会关闭。

Example:- 
    <mat-menu #nameAndDescriptioContextMenu="matMenu" [hasBackdrop]="false">
         <a (click)="$event.stopPropagation();$event.preventDefault();">
               <div>
                 Form Group Form
               </div> 
         </a> 
    </mat-menu>