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

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的演示。