时间戳

首页 > 解决方案 > 为什么启用 contentEditable 的 div 中的空格键不能在 mat-expansion-panel-header 中工作？

angular - 为什么启用 contentEditable 的 div 中的空格键不能在 mat-expansion-panel-header 中工作？

问题描述

在我更新到 Angular 11 之前，这在我的应用程序中工作，现在它只是拒绝工作。

https://stackblitz.com/edit/angular-hh81uk?file=app/expansion-overview-example.html

<mat-expansion-panel>
  <div contenteditable="true">Hello</div>
  <mat-expansion-panel-header
    #panelHeader
    (keydown.space)="panelHeader._toggle();"
  >
    <div contenteditable="true">Div</div>
    <span contenteditable="true">Span</span>
  </mat-expansion-panel-header>
</mat-expansion-panel>

我认为这可能与使用$event.stopImmediatePropagation()or有关$event.preventDefault，但正如您在 stackblitz 示例中看到的那样，我没有使用这些功能中的任何一个，并且当我按下空格键时，空白字符不会添加到内容可编辑的 div 或 span 中。

但是，一旦我尝试使用 mat-expansion-panel 中的 div，空格键就可以正常工作。

标签： angularangular-material

解决方案

做得好“空格”是为了打开关闭面板。他们防止违约，这是肯定的。为了不打开/关闭面板，您需要停止面板中可编辑内容的事件传播：

<mat-expansion-panel>
  <div contenteditable="true">Hello</div>
  <mat-expansion-panel-header #panelHeader>
    <div (keydown.space)="$event.stopPropagation()">
      <div contenteditable="true">Div</div>
      <br />
      <span contenteditable="true">Span</span>
    </div>
  </mat-expansion-panel-header>
</mat-expansion-panel>

https://stackblitz.com/edit/angular-hh81uk-haezrt?file=app%2Fexpansion-overview-example.html

推荐阅读