Angular mention库中修改已选提及文本时如何自动清除选中项

实现技巧（不用换库，基于你正在使用的angular-mention即可实现） #

• 核心逻辑是存储所有已插入提及项的位置与原始文本，每次输入时校验区间文本一致性，步骤如下：

1. 在提及项选中回调中，记录该提及内容的完整原始文本（如@Jacob）、在输入框中的起始下标、结束下标，存入专门的数组维护。
2. 给输入框绑定input事件，每次触发时倒序遍历存储的提及项数组，截取输入框中对应下标区间的当前文本，和存储的原始文本对比。
3. 如果内容不一致，直接将该条记录从提及项数组中移除即可解除绑定，需要同步删除对应文本的话再额外做字符串替换即可。
4. 额外注意：如果用户在已有提及项的前后位置插入/删除内容，要对应调整所有提及项的start、end下标偏移量，避免位置匹配错乱。

关键代码示例

// 维护已选中的提及项元数据
selectedMentions: Array<{
  rawText: string,
  start: number,
  end: number
}> = []

// 提及选中回调
onMentionSelect(item: {name: string}) {
  const input = this.commentInput.nativeElement as HTMLTextAreaElement
  const fullMentionText = `@${item.name}`
  const cursorAt = input.selectionStart
  this.selectedMentions.push({
    rawText: fullMentionText,
    start: cursorAt - fullMentionText.length,
    end: cursorAt
  })
}

// 输入框内容变化回调
onInputChange(e: Event) {
  const inputEl = e.target as HTMLTextAreaElement
  const content = inputEl.value
  // 倒序遍历避免删除元素导致的索引偏移
  for (let i = this.selectedMentions.length - 1; i >= 0; i--) {
    const mention = this.selectedMentions[i]
    const currentSlice = content.slice(mention.start, mention.end)
    if (currentSlice !== mention.rawText) {
      // 移除不符合的提及项绑定
      this.selectedMentions.splice(i, 1)
      // 如需直接删除不完整的提及内容，打开下方注释即可
      // const newContent = content.slice(0, mention.start) + content.slice(mention.end)
      // inputEl.value = newContent
    }
  }
}

替代库方案 #

如果不想自己维护位置逻辑，可以换用@angular-extensions/mention库，它内置了allowEditing配置，设为false后用户修改已插入的提及内容时，会自动解除提及绑定或者直接移除内容，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者quoc bao Pham