Angular Material 带输入的扩展面板 Header

Question

我有一个使用 Angular Material 组件的 angular 12 应用程序。我有一个扩展面板，在 header 中有一个输入。

<mat-expansion-panel class="mt-2 mat-elevation-z4" *ngFor="let segmentGroup of segmentGroups">
            <mat-expansion-panel-header>
                    <mat-form-field appearance="outline" class="w-25 tableInput">
                        <input matInput [(ngModel)]="segmentGroup.name" (change)="segmentGroup.isDirty = true" (click)="$event.stopPropagation();">
                    </mat-form-field>
                    <button mat-icon-button *ngIf="segmentGroup.isDirty" (click)="Save()">
                        <mat-icon>save</mat-icon>
                    </button>
            </mat-expansion-panel-header>

我希望顶部能够编辑 Header 内的值。最初的问题是当您单击输入时，它会展开和折叠扩展面板。 onclick 停止传播修复了该问题。但是，当前的问题是您无法使用 space 栏输入 space。 spacebar 使扩展面板展开和折叠。我怎样才能防止这种行为并在输入中允许 spaces。

Answer 1

您可以通过获取空格键 keydown-event 然后使用 event.stopPropagation() 阻止它折叠 mat-expansion:

来停止空格键事件传播

<mat-form-field appearance="outline" class="w-25 tableInput">
          <input matInput [(ngModel)]="name" (click)="$event.stopPropagation();" (keydown)="handleSpacebar($event)">
</mat-form-field>

handleSpacebar(event) {
    if (event.keyCode === 32) {
      event.stopPropagation();
    }
   }

或者如果您只做模板解决方案，那么您可以通过绑定到 keyDown 事件直接在模板中完成。

  <mat-form-field appearance="outline" class="w-25 tableInput">
          <input matInput [(ngModel)]="name" 
           (click)="$event.stopPropagation()" 
           (keydown.Space)="$event.stopImmediatePropagation()"
          >
  </mat-form-field>

Angular Material 带输入的扩展面板 Header

Angular Material Expansion Panel Header with Input

angular-material

angular