如何防止角料mat-menu关闭？ [英] How to prevent angular material mat-menu from closing?

问题描述

我正在使用角度素材创建一个日期时间选择器控件，并使用以下代码执行此操作

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>

目前，当我点击一个按钮时，它正在关闭菜单。我知道我们可以在每个mat-menu-item上执行$ event.stoppropagation（）以防止它关闭。

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.

但我想知道是否可以为mat-calendar执行此操作

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?

推荐答案

你只需添加（点击）=$ event.stopPropagation （）到这些日历的父元素。如下所示，

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演示。

这篇关于如何防止角料mat-menu关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！