如何让Angular @flxng/mentions库支持重复选择同一个选项

@flxng/mentions 默认的去重逻辑是在选择触发前，对比已选中项和当前待选项的追踪标识，标识重复就直接拦截，不会触发choiceSelected事件，也不会插入提及内容。可以用下面两种方案实现重复选择，不需要额外改动过多原有逻辑：

方案1：无侵入配置实现（推荐） #

利用组件自带的trackByFn配置项，绕过默认的去重判断，不需要修改库源码：

• 首先在组件类中定义自定义追踪函数，不要用选项本身的固定业务ID作为追踪依据，而是每次生成临时唯一标识，让库判定每次选中的都是独立选项：

// 你的业务组件TS文件
export class YourEditorComponent {
  // 自定义提及选项追踪逻辑
  trackMentionItem: (index: number, item: any) => string = (_, item) => {
    // 拼接随机串+时间戳生成临时唯一key，避开重复校验
    return `${item.bizId}_${Date.now()}_${Math.random().toString(36).slice(2,7)}`;
  };

  // 选中事件处理
  onMentionSelect(selected: any) {
    // 删掉临时生成的标识字段，只保留业务需要的选项数据即可
    const bizData = { ...selected };
    delete bizData.tempKey;
    // 后续正常写你的业务处理逻辑
  }
}

• 在模板中给提及组件绑定该追踪函数，原有其余配置保持不变即可：

<flx-mentions
  [choices]="mentionOptionList"
  [trackByFn]="trackMentionItem"
  (choiceSelected)="onMentionSelect($event)"
></flx-mentions>

方案2：修改源码去掉重复校验 #

如果不想在业务层加临时标识，可以直接修改库的源码逻辑：

• 找到库内处理选择逻辑的核心文件，一般是mention.directive.ts，定位到选中前的重复校验代码，通常是类似下面的判断逻辑：

// 找到这段拦截重复选择的代码，直接注释或删除即可
if (this.selectedChoices.some(exist => this.trackByFn(0, exist) === this.trackByFn(0, choice))) {
  return;
}

• 修改后可以用patch-package给依赖打固定补丁，避免重新安装依赖时修改丢失。

注意：如果用源码修改的方案，后续升级@flxng/mentions版本时需要重新同步修改，否则自定义逻辑会被新版本覆盖。

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