☰

ヘッダーの mat-checkbox がクリックされたときに mat-expansion パネルが切り替わらないようにする 質問する

tag-icon • tag-icon javascript html angular angular-material
ヘッダーの mat-checkbox がクリックされたときに mat-expansion パネルが切り替わらないようにする 質問する

ヘッダー内のチェックボックスがクリックされたときに、拡張パネルが切り替わらないようにできますか? 何らかの方法でイベントの伝播を停止します。現在、以下のサンプル コードでは、チェックボックスがクリックされると、パネルも切り替わります (開く/閉じる)。望ましい状態は、ヘッダー内のチェックボックスを除くヘッダーの任意の領域がクリックされたときに、拡張パネルが切り替わることです。

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox>Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

ベストアンサー1

mat-checkbox がクリックされたときに stopPropagation $event メソッドを呼び出すことができます。

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

おすすめ記事