切换按钮不触发面板扩展

Question

我想在扩展面板的描述部分放置切换按钮。当它们与扩展面板交互时会做出反应。与切换按钮交互时如何防止扩展面板触发？我在这里提供了示例 https://angular-ivy-he4grl.stackblitz.io

Answer 1

您的事件冒泡到面板 header，为防止冒泡，您可以使用 event.stopPropagation() 停止事件的传播。在你的情况下，我只是为每个按钮添加了一个点击事件：

<mat-button-toggle
  value="bold"
  (click)="$event.stopPropagation()"
>
    Bold
</mat-button-toggle>

Toggle button not to trigger panel expansion