如何解绑mat-chip键盘事件？解决可编辑mat-chip删除键失效问题

嘿，我来帮你搞定这两个mat-chip的问题！下面是针对每个问题的具体解决方案：

问题1：解绑mat-chip的键盘事件 #

mat-chip默认会监听一系列键盘事件（比如Backspace、Delete键用来触发芯片移除），如果要解绑这些事件，最稳妥的方式是通过自定义指令来拦截事件，阻止其冒泡到mat-chip的内部处理逻辑中。

实现步骤： #

1. 创建一个自定义指令，捕获键盘事件并阻止传播：

import { Directive, HostListener } from '@angular/core';
import { MatChip } from '@angular/material/chips';

@Directive({
  selector: '[appUnbindChipKeyboard]'
})
export class UnbindChipKeyboardDirective {
  constructor(private matChip: MatChip) {}

  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    // 如果你想解绑所有键盘事件，直接阻止冒泡即可
    // 若只需解绑特定按键，可添加判断条件，比如只拦截Backspace/Delete
    event.stopPropagation();
    // 若不需要原生键盘行为，可加上 event.preventDefault();
  }
}

2. 在你的HTML模板中，给目标mat-chip添加这个指令：

<mat-chip appUnbindChipKeyboard>我是解绑了键盘事件的芯片</mat-chip>

这种方式不会依赖mat-chip的私有属性，避免了版本更新导致的兼容问题，是比较推荐的方案。

问题2：解决contenteditable mat-chip的DELETE/BACKSPACE键失效问题 #

你推测的原因完全正确——mat-chip默认会把Backspace和Delete键绑定到芯片的移除逻辑上，这就拦截了原生contenteditable的删除行为。我们可以通过自定义指令，针对性地放行这两个按键的原生行为。

具体解决方案： #

修改自定义指令，只拦截这两个按键的事件传播，让原生编辑逻辑生效：

import { Directive, HostListener } from '@angular/core';
import { MatChip } from '@angular/material/chips';

@Directive({
  selector: '[appEditableChip]'
})
export class EditableChipDirective {
  constructor(private matChip: MatChip) {}

  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    // 当按下Backspace或Delete时，阻止事件冒泡到mat-chip的移除逻辑
    if (event.key === 'Backspace' || event.key === 'Delete') {
      event.stopPropagation();
      // 不要调用preventDefault，这样原生的删除行为就能正常触发
    }
  }
}

然后在HTML中同时添加contenteditable="true"和这个指令：

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

额外提示： #

如果你的芯片不需要“移除”功能，记得不要添加<mat-chip-remove>元素，避免出现不必要的交互冲突。

内容的提问来源于stack exchange，提问作者devidove