仅在图标单击时展开面板 - Angular 材料

Question

我正在使用 Material 从事 Angular 11 项目。

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

我发现了这个帖子： Angular 材质扩展面板，仅在按钮单击时展开
然而，该人的解决方案是拥有自己的带有箭头图标的按钮，而不是使用材质面板已有的箭头图标。 我宁愿使用材料在面板中提供的图标，也不愿创建自己的按钮。

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

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

任何帮助，将不胜感激。

Answer 1

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

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

分叉的工作示例

Answer 2

这是更新的 stackblitz 链接，打开并查看并让我知道我是否使用了您现有的代码。

示例链接