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

Question

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

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

我找到了这个帖子：
然而，该人的解决方案是让他们自己的按钮带有箭头图标，而不是使用 material 面板已有的箭头图标。我宁愿使用 material 在面板中提供的图标，也不愿创建我自己的按钮。

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

我做了这个演示，显示了我的问题：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。当您单击 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>

Forked Working Example

Answer 2

这是更新的 stackblitz link，打开并查看并告诉我是否使用了您现有的代码。

example link

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

Expand Panel Only on Icon Click - Angular Material

material-design

angular-material

angular