角度材料のマットメニューが閉じないようにするにはどうすればいいですか？

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> 

ことを行うために以下のコードを抱えています。私たちは$ item.stoppropagation（）をそれぞれのマットメニュー項目で行うことができ、それが終了しないようにすることができます。

しかし、私が知りたいのは、それは私はそれがメニューを閉じている日付を選択すると、マット・カレンダー

のためにあなたが現在上記の画像で見ることができるようにすることを行うことが可能です。それを防ぐことは可能ですか？

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 demoです。