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

Question

我的应用程序中有一个垫扩展面板，需要在其标题中具有滑动切换功能。

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

我尝试调用 $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 
  }

Answer 1

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

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