从 mat-chip 取消绑定键盘事件？答案

【问题标题】：Unbind keyboard events from mat-chip?从 mat-chip 取消绑定键盘事件？
【发布时间】：2018-08-28 15:01:28
【问题描述】：

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

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

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

StackBlitz demo

您可以正确编辑内容，但无法使用 [DELETE] 或 [BACKSPACE] 将其删除。但是，您可以剪切内容（使用剪贴板）。我认为这是由于 mat-chips 如何处理键盘事件。从Angular Material Doc，它表示在'remove'方法上：

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

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

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

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

【问题讨论】：

标签： html angular typescript angular-material

【解决方案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();
}

【讨论】：

我不得不使用 (keydown) 因为 (keypress) 仍然阻止了退格键和空格键的输入。

【解决方案2】：

<mat-chip #chip (focus)="chip.blur()">
    example data 
    <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>

虽然它已经晚了，但想保持一种更简单的方法来解决这个问题，即在元素焦点上我们会立即对其进行模糊处理，这不会影响其任何由角度材料预先定义的功能......

【讨论】：