html - 从mat-chip解除绑定(bind)键盘事件？

Question

我需要能够编辑 mat-chip 中的内容。

这个过程在 HTML 中非常简单:

<mat-chip contenteditable="true">Editable content</mat-chip>

StackBlitz demo

您可以正确编辑内容，但不能使用[DELETE] 或[BACKSPACE] 删除它。但是您可以剪切内容(使用剪贴板)。我认为这是由于 mat-chips 如何处理键盘事件。来自Angular Material Doc ，它在“删除”方法上表示:

Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or BACKSPACE keys are pressed."

那么有没有办法解除这些事件与mat-chip的绑定(bind)，这样我就可以使用这些键来编辑内容了？无论如何，我不打算让筹码可以通过键盘删除。

我尝试使用 [removable]="false"但它没有做任何事情(参见 stackblitz)

我想也许我可以禁用所有键盘交互，但在 keyboard interaction 部分似乎没有任何方法可以这样做.

Answer 1

您可以通过在 mat-chip-content 中添加按键处理程序来拦截冒泡键事件。

您的模板:

<mat-chip>
   <div class="input-wrapper" (keypress)="onMatChipKeyPress($event)">
      <input placeholder="Here you type in some content and press backspace or other keys">
   </div>
</mat-chip>

您的 Javascript/Typescript:

onMatChipKeyPress(event) {
   event.stopImmediatePropagation();
}