角材料扩展面板，仅在单击按钮时扩展

Question

默认情况下，当用户单击标题中的任意位置时，Angular展开面板将展开。但是，我想更新此功能，以便只有右侧箭头按钮才能触发扩展事件。有人可以帮助我实现这一目标吗？ 以下是示例代码。 https://stackblitz.com/edit/angular-exp-panel-click

<button (click)="panel1.toggle()" mat-raised-button>Toggle panel 1</button>
<button (click)="panel2.toggle()" mat-raised-button>Toggle panel 2</button>

手风琴手风琴外部的按钮可以正确地扩展所需的面板，但是在标题内添加相同按钮的功能无法正常工作。

Answer 1

您可以：

1. 完全删除click事件处理程序。之所以起作用，是因为按钮具有鼠标单击功能，而面板的其余部分却没有，因为它具有pointer-events: none样式属性。然后，点击事件会传播到面板上，从而切换展开状态。

<button class="toggle-panel" mat-raised-button>

1. 在事件处理程序中调用$event.stopPropagation()，以防止面板也收到click事件，这会将扩展切换回其原始状态。

<button class="toggle-panel" (click)="$event.stopPropagation(); panel2.toggle()" ... >

有关演示，请参见this stackblitz。