Question

我的应用程序中有一个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 
  }

Answer 1

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

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

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

1 个答案: