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

Question

如果我不希望在单击按钮时面板收缩，该怎么办

<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

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

我在每个席子扩展面板和动作[disabled]="clickButton"上添加了(click)="clickButton=false"。 默认情况下，clickButton: boolean = false;并在垫子扩展面板上单击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()");
}

我希望这会对您有所帮助。

演示：

Answer 2

我也解决了这个疑问，我们可以做的是在按钮click函数中传递$ 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 ){
     ...
    }
}