【问题标题】：Angular Material Expansion panel, expand only on button clickAngular Material Expansion 面板，仅在按钮单击时展开
【发布时间】：2020-01-13 11:13:49
【问题描述】：
默认情况下，当用户单击标题中的任意位置时，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>
mat-accordion 外的按钮可以正确扩展所需的面板，但是在标题内添加相同的按钮时无法按预期工作。
【问题讨论】：
标签：
angular
angular-material
【解决方案1】：
您可以：
- 完全删除
click 事件处理程序。这是因为按钮捕捉到了鼠标点击，而面板的其余部分没有，因为它具有pointer-events: none 样式属性。然后点击事件传播到面板，面板会切换展开。
<button class="toggle-panel" mat-raised-button>
- 在事件处理程序中调用
$event.stopPropagation()，以防止面板也接收到单击事件，这会将展开切换回其原始状态。
<button class="toggle-panel" (click)="$event.stopPropagation(); panel2.toggle()" ... >
请参阅this stackblitz 以获取演示。