angular - 仅在单击图标时展开面板 - Angular Material

Question

我正在使用 Material 在 Angular 11 项目中工作。

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

我找到了这个帖子:Angular Material Expansion panel, expand only on button click
然而，该人的解决方案是让他们自己的按钮带有箭头图标，而不是使用 Material 面板已有的箭头图标。我宁愿使用 Material 在面板中提供的图标，也不愿创建自己的按钮。

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

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

如有任何帮助，我们将不胜感激。

Answer 1

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

<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>

Forked Working Example