如何在角度标题中删除按钮单击时的扩展？ [关闭]答案

【问题标题】：How to remove expansion on button click in header in angular? [closed]如何在角度标题中删除按钮单击时的扩展？ [关闭]
【发布时间】：2021-08-05 12:48:22
【问题描述】：

我正在使用有棱角的材料并在使用垫子扩展时被击中。每当我单击我在扩展面板上添加的按钮时，它都会按照 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>

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

【问题讨论】：

标签： html css angular angular-material

【解决方案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 ){
     ...
    }
}

【讨论】：

【解决方案2】：

好的，我试图抑制 mat-expansion 标头的扩展收缩，StackBlitz HERE。

我在每个垫子扩展面板上添加了[disabled]="clickButton" 和(click)="clickButton=false" 操作。默认情况下，clickButton: boolean = false；当点击 mat-expansion-panel 时，clickButton=false.

<mat-expansion-panel class="mat-elevation-z8" [disabled]="clickButton" (click)="clickButton=false">
  <mat-expansion-panel-header>
    <mat-panel-description>
      <button mat-icon-button (click)="moveUp()"><mat-icon>arrow_upward</mat-icon></button>
      <button mat-icon-button (click)="moveDown()"><mat-icon>arrow_downward</mat-icon></button>   
      <button mat-icon-button (click)="removeWidget()" color="warn"><mat-icon>clear</mat-icon></button>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
    <p>...</p>
  </div>
</mat-expansion-panel>

我在你的函数中添加了this.clickButton = true;，从而允许在单击其中一个按钮时不打开面板。

moveUp(){
  this.clickButton = true;
  console.log("function()");
}

希望对你有帮助。

演示：

【讨论】：