Angular Material Expansion 面板，仅在单击按钮时展开

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>

mat-accordion 外部的按钮正在正确扩展所需的面板，但是在标题中添加的相同按钮无法按预期工作。

Answer 1

您可以：

1. 完全删除click事件处理程序。 这是有效的，因为按钮捕获鼠标单击，而面板的其余部分没有，因为它具有pointer-events: none样式属性。 然后将单击事件传播到面板，从而切换展开。

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

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

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

有关演示，请参阅此 stackblitz 。