如何停止使用空格键触发<mat-expansion panel>？

Question

我在面板描述中有一个带有文本区域框的手风琴。当我连接到文本区并按下空格键时，它会打开/关闭面板。我怎么才能阻止它呢？

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Header
    </mat-expansion-panel-header>
    <mat-panel-description>
      <mat-form-field>
        <textarea matInput></textarea>
      </mat-form-field>
    </mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

我发现了一个更干净的解决方案。仅添加到面板-header this for override keydown事件空间：

(keydown.Space)="$event.stopImmediatePropagation();"

<mat-expansion-panel-header (keydown.Space)="$event.stopImmediatePropagation();">

参考：https://github.com/angular/components/blob/master/src/material/expansion/expansion-panel-header.ts

Answer 2

你可以在你的html中做这样的事情，

<mat-accordion>
 <mat-expansion-panel>
  <div (keydown)="handleSpacebar($event)">
   /*this div should contain elements inside of the mat-expansion-panel
   where you would like to stop the propagation of the space key press*/             
  </div>
 </mat-expansion-panel>
</mat-accordion>

.js中的函数是这样的，

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

现在，您可以在div内的任何元素中使用空格，而不会导致扩展面板关闭。希望这能有所帮助！

Answer 3

你也可以使用这个简短的版本：

<div (keydown.Space)="$event.stopPropagation()">