如何让Angular mat-chip支持按空格、逗号和Tab键添加新元素？

这个需求超实用的！默认的Angular mat-chip确实只支持Enter键触发添加操作，要扩展到空格、逗号和Tab键其实很简单，我们只需要在输入框上额外监听键盘事件，手动触发已有的添加逻辑就行，我给你一步步拆解修改方案：

第一步：修改模板中的输入框，添加键盘事件监听 #

首先在你的input标签上加上(keydown)="handleKeydown($event)"，这样我们就能捕获到用户按下的每一个按键：

<input
  [placeholder]="'EMAIL' | translate"
  [matChipInputFor]="chipGrid"
  (matChipInputTokenEnd)="add($event)"
  (keydown)="handleKeydown($event)"
/>

第二步：在组件类中实现键盘事件处理逻辑 #

接下来在你的组件TS文件里，添加handleKeydown方法，同时我们需要通过@ViewChild获取输入框的实例，用来构造事件和清空输入：

import { Component, ViewChild } from '@angular/core';
import { MatChipInputEvent, MatChipInput } from '@angular/material/chips';
// ... 其他必要的导入

@Component({
  // ... 组件元数据
})
export class YourComponent {
  @ViewChild(MatChipInput) chipInput!: MatChipInput;
  // ... 你的现有属性，比如keywords$、formControl等

  handleKeydown(event: KeyboardEvent) {
    // 定义我们想要触发添加操作的按键：空格、逗号、Tab
    const triggerKeys = [' ', ',', 'Tab'];
    
    if (triggerKeys.includes(event.key)) {
      // 阻止按键的默认行为：比如Tab默认会切换焦点，空格会输入空格字符
      event.preventDefault();
      
      // 构造一个MatChipInputEvent，和matChipInputTokenEnd事件的格式一致
      const inputEvent = new MatChipInputEvent(
        this.chipInput,
        event,
        this.chipInput.value?.trim() || ''
      );
      
      // 调用你已有的add方法，复用添加逻辑
      this.add(inputEvent);
    }
  }

  // 确保你的add方法能正确处理事件（和原来的逻辑保持一致即可）
  add(event: MatChipInputEvent) {
    const value = (event.value || '').trim();

    // 只有当输入内容不为空时才添加
    if (value) {
      const currentKeywords = this.keywords$();
      // 避免重复添加相同的关键词
      if (!currentKeywords.includes(value)) {
        this.keywords$.set([...currentKeywords, value]);
      }
    }

    // 清空输入框
    event.chipInput?.clear();
  }

  // ... 你的其他方法，比如removeKeyword
}

关键细节说明 #

1. 阻止默认行为：这一步很重要！比如Tab键默认会让焦点跳转到下一个元素，不阻止的话就没法触发添加逻辑；空格默认会在输入框里输入空格字符，阻止后才能直接把当前内容作为关键词添加。
2. 复用现有add方法：通过构造和matChipInputTokenEnd相同格式的MatChipInputEvent，我们不需要重复写添加逻辑，直接调用原来的add方法就行，代码更简洁也更易维护。
3. 按键判断方式：这里用event.key来判断按键，比旧的keyCode更语义化，也更兼容现代浏览器。

这样改完之后，你按空格、逗号或者Tab键，就和按Enter键的效果完全一样了，输入的内容会被自动添加成新的mat-chip，同时输入框会被清空，完美满足你的需求！

备注：内容来源于stack exchange，提问作者Raphaël Balet