如何在角度标题中删除按钮单击时的扩展？

Question

我正在使用有角度的材料，并在使用垫扩展时被击中。每当我单击我在扩展面板上添加的按钮时，它都会按照 mat-panel 的基本属性关闭。

要求 - 面板不应在单击按钮时收缩。

<mat-expansion-pannel>
  <mat-expansion-panel-header>
    <mat-panel-title class="title-align">
      Image
    </mat-panel-title>
    <mat-panel-description>
      <button mat-icon-button (click) ="moveUp(i)"><i class="material-icons md-18">arrow_upward</i></button>
      <button mat-icon-button (click) ="moveDown(i)"><i class="material-icons md-18">arrow_downward</i></button>   
      <button mat-icon-button color="warn" (click) ="removeWidget(i)">
      <i class="material-icons md-18">clear</i>
      </button>
    </mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-pannel>

如代码中所指定，面板应执行上移和下移功能。一种方法是我们可以禁用面板上任何类型的按钮单击，但由于我们需要按钮的功能，我只希望按钮可以工作而不希望面板不必要地收缩/扩展。

Answer 1

我也解决了这个疑问，我们可以做的是在按钮单击函数中传递 $event ，然后调用 stopPropogation() 函数。

<mat-expansion-panel class="mat-elevation-z8">
  <mat-expansion-panel-header>
    <mat-panel-description>
      <button mat-icon-button (click)="moveUp($event,i)"><mat-icon>arrow_upward</mat-icon></button>
      <button mat-icon-button (click)="moveDown($event,i)"><mat-icon>arrow_downward</mat-icon></button>   
      <button mat-icon-button (click)="removeWidget(i)" color="warn"><mat-icon>clear</mat-icon></button>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
  </div>
</mat-expansion-panel>

还有打字稿文件中的功能：

moveUp(event : any, id : number) : void{
    event.stopPropagation();
    if(id > 0 ){
     ...
    }
}