防止 mat-expansion-panel-header 中的滑动切换扩展面板答案

【问题标题】：Prevent slide toggle in mat-expansion-panel-header from expanding the panel防止 mat-expansion-panel-header 中的滑动切换扩展面板
【发布时间】：2020-08-20 12:13:39
【问题描述】：

我的应用中有一个 mat-expansion-panel，需要在其标题中添加一个滑动开关。

问题是当滑动切换被切换时，鼠标事件也会激活展开面板的展开功能。这意味着只需单击一下即可更改滑动切换并且面板会展开，这并不理想。

我尝试调用 $event.stopPropagation() 但这没有任何效果。有没有办法防止这种情况发生？

<div>
    <mat-expansion-panel>
        <mat-expansion-panel-header class="card-padding" disabled="true">
            <div class="flex-row">
                <div class="align-center mr-md">
                    <mat-slide-toggle disableRipple="true" (change)="toggleChange($event)"></mat-slide-toggle>
                </div>
            </div>
        </mat-expansion-panel-header>
    </mat-expansion-panel>
</div>


toggleChange(event: any){
    event.stopPropagation(); //this does nothing 
  }

【问题讨论】：

标签： angular angular-material

【解决方案1】：

你应该使用(click)而不是(change)，你可以像这样直接将它添加到模板中

<mat-slide-toggle disableRipple="true" (click)="$event.stopPropagation()"></mat-slide-toggle>

【讨论】：