解除键盘事件与 mat-chip 的绑定？

Question

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

HTML 中的过程非常简单：

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

StackBlitz 演示

您可以正确编辑内容，但无法使用[DELETE]或[BACKSPACE]删除它。但是您可以剪切内容（使用剪贴板）。我认为这是由于 mat-chips 处理键盘事件的方式造成的。在Angular Material Doc中，它在“remove”方法中指出：

允许以编程方式移除芯片。当按下 DELETE 或 BACKSPACE 键时由 MatChipList 调用。”

那么有没有办法将这些事件与 mat-chip 解除绑定，以便我可以使用这些键编辑内容？无论如何，我不打算让芯片可以通过键盘删除。

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

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

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/打字稿：

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