web-dev-qa-db-ja.com

angularマテリアルマットメニューが閉じるのを防ぐ方法は？

angularマテリアルで日時ピッカーコントロールを作成し、それを行うための以下のコードを用意しています

<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（）を実行して、それが閉じないようにすることができます。

しかし、私はマットカレンダーのためにそれを行うことが可能であることを知りたい

enter image description here

上の画像にあるように、現在日付を選択するとメニューが閉じられます。それを防ぐことは可能ですか？

javascriptangularangular-material2
19
Umamaheswaran

これらのカレンダーの親要素に(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デモ 。

37
Anik

前のソリューションに戻ることで、メソッドに命令をカプセル化することで、メニューを閉じずに命令の実行を継続できます

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
}
3
JLazar0