如何在Angular Material v11输入框中集成可编辑文本与Chips？

要在输入框中同时支持可编辑文本和Angular Chips，核心是要将文本段和Chip元素统一作为可交互内容管理，而不是分开渲染静态文本。以下是贴合Angular Material生态的实现方案：

核心思路 #

把整个输入内容拆分为文本段和Chip项的混合数组，动态渲染每个元素，并为文本段添加编辑能力，同时保留Chip的添加/删除交互。

具体实现 #

1. 定义数据结构 #

在组件中创建数组存储混合内容，每个元素标记类型：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';

interface ContentItem {
  type: 'text' | 'chip';
  value: string;
}

@Component({
  selector: 'app-chips-mixed-text',
  templateUrl: './chips-mixed-text.component.html',
  styleUrls: ['./chips-mixed-text.component.css']
})
export class ChipsMixedTextComponent {
  contentItems: ContentItem[] = [
    { type: 'chip', value: 'Mike' },
    { type: 'text', value: ' went on hike with ' },
    { type: 'chip', value: 'Jane' },
    { type: 'text', value: ' and they met ' },
    { type: 'chip', value: 'Katie' },
    { type: 'text', value: ' in the middle. ' }
  ];
  fruitCtrl = new FormControl('');

  updateText(index: number, event: Event) {
    const target = event.target as HTMLElement;
    this.contentItems[index].value = target.innerText;
  }

  removeChip(index: number) {
    this.contentItems.splice(index, 1);
  }

  addChip(event: MatChipInputEvent) {
    const value = (event.value || '').trim();
    if (value) {
      this.contentItems.push(
        { type: 'chip', value },
        { type: 'text', value: ' ' }
      );
    }
    event.chipInput!.clear();
  }

  // 提交时整合完整内容
  getFullContent(): string {
    return this.contentItems.map(item => item.value).join('');
  }
}

2. 模板渲染 #

遍历混合内容数组，根据类型渲染Chip或可编辑文本：

<mat-form-field class="example-chip-list">
  <mat-label>混合内容编辑</mat-label>
  <mat-chip-list #chipList aria-label="混合内容编辑">
    <ng-container *ngFor="let item of contentItems; let i = index">
      <!-- 渲染Chip项 -->
      <mat-chip 
        *ngIf="item.type === 'chip'" 
        (removed)="removeChip(i)"
        removable
      >
        {{ item.value }}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
      <!-- 渲染可编辑文本段 -->
      <span 
        *ngIf="item.type === 'text'"
        contenteditable="true"
        (input)="updateText(i, $event)"
        class="editable-text"
      >{{ item.value }}</span>
    </ng-container>
    <!-- 保留Chip添加输入框 -->
    <input
      #fruitInput
      [formControl]="fruitCtrl"
      [matChipInputFor]="chipList"
      (matChipInputTokenEnd)="addChip($event)"
      placeholder="添加新标签..."
    />
  </mat-chip-list>
</mat-form-field>

3. 样式调整 #

让可编辑文本与Chip视觉对齐：

.editable-text {
  display: inline-block;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 24px;
  vertical-align: middle;
  outline: none;
  border-radius: 4px;
}

.editable-text:focus {
  background-color: #f5f5f5;
}

进阶优化 #

• 光标定位：如果需要在文本中间插入Chip，可以监听键盘事件（如Enter），将选中的文本转换为Chip并插入到数组对应位置。
• 格式过滤：对contenteditable元素添加粘贴事件过滤，清除多余格式，只保留纯文本。
• 表单集成：将getFullContent()的返回值绑定到表单控件，确保提交时能获取完整内容。

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