如何在Angular 8中实现@提及功能的自定义下拉菜单

第三方库方案（开箱即用） #

推荐使用angular-mentions库，1.4.0及以下版本完美适配Angular 8，完全覆盖你提出的输入@触发下拉、光标位置定位、用户匹配的需求，核心使用步骤如下：

• 安装指定版本依赖：npm install angular-mentions@1.4.0
• 在业务所属的模块文件中导入MentionModule并加入imports数组
• 在页面的<textarea>标签上添加[mention]="users"属性，其中users是你提前准备好的待提及用户数组，支持自定义配置每个用户的显示名、插入值、匹配规则
• 库默认触发字符为@，也可以通过配置项自定义触发字符、下拉菜单样式、匹配逻辑等，不需要自行处理光标定位、字符替换等逻辑

自定义实现方案（适合高度定制需求） #

如果第三方库无法满足你的特殊业务需求，可以按以下核心逻辑自行实现：

• 监听<textarea>的input事件，当检测到最近输入的字符为@时，触发展开下拉菜单的逻辑
• 通过textarea.selectionStart获取当前光标的字符偏移量，结合textarea.getBoundingClientRect()计算出光标在视口中的坐标，以此定位下拉菜单的显示位置，保证菜单紧跟光标显示
• 监听@输入后的后续输入事件，实时获取@后的匹配字符串，过滤用户列表做动态展示
• 用户选中待提及项后，将@+匹配字符串替换为选中的用户名，插入到光标对应位置，同时隐藏下拉菜单
• 补充键盘事件监听：支持上下方向键切换选中项、回车确认选中、ESC关闭下拉菜单，同时监听页面点击事件，点击下拉菜单以外区域时自动关闭菜单

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