Question

我在面板描述中有一个带有textarea盒子的席子手风琴。当我在文本区域中绑定并点击空格键时，它会打开/关闭面板。我怎么能阻止这个？

<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

你在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 2

我发现一种解决方案更干净。仅将它添加到面板标题中以覆盖键击事件SPACE：

(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 3

您还可以使用以下较短的版本：

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

如何阻止<mat-expansion-panel>触发空格键？

3 个答案: