仅在单击图标时展开面板 - 角度材质

Question

我正在使用 Material 参与 Angular 11 项目。

我正在使用一些扩展面板。我将在扩展面板的标题中添加一个按钮。因此，我希望仅当单击箭头图标（右侧）时才展开/折叠该行。现在，如果单击标题的任何部分，面板将展开/折叠。

我发现这个帖子：Angular Material Expansion panel, Expand only on button click
但是，该人的解决方案是拥有自己的带有箭头图标的按钮，而不是使用材质面板已有的箭头图标。我宁愿使用面板中材料提供的图标，也不愿创建自己的按钮。

有什么方法可以让我在选择切换图标时向材料发出信号，表明我只想展开？财产还是什么？我认为很多人都希望拥有某种功能...
如果没有，我有办法强制这种行为吗？我不想创建自己的切换按钮，我想使用面板中的切换按钮。

我制作了这个演示，展示了我的问题：https://stackblitz.com/edit/expand-collapse-on-icon-click-only ?file=src/app/expansion-expand-collapse-all-example.html

任何帮助，将不胜感激。

Answer 1

在 my-panel div 元素上使用stopPropation 。当您单击标题的任何部分时，它将阻止扩展面板打开。

<mat-accordion class="example-headers-align" multi>
      <!-- #enddocregion multi -->
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <div class="my-panel"  (click)="$event.stopPropagation();">
            <h3>Panel Header</h3>
     <button mat-stroked-button (click)="myButton()">my button</button>
          </div>
        </mat-expansion-panel-header>
    
        <div>My panel content!</div>
      </mat-expansion-panel>
  </mat-accordion>

分叉工作示例