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

Posted 2023-03-06

【中文标题】如何在Angular 8中实现@提及自定义下拉菜单

【英文标题】：How to implement @ mentions custom dropdown in Angular 8

【发布时间】：2021-12-28 09:48:09

【问题描述】：

我想在 Angular 8 中实现大多数社交媒体网络中的以下功能。

这是场景：

当用户在<textarea> 中输入时，只要他输入@ 符号，那么我想在该指定位置（光标闪烁的位置）显示一个下拉列表。

我试图找到任何npm 包但找不到。

任何库或任何解决方案可以做到这一点？

【问题讨论】：

我们无法调试图像，你能告诉我们你到目前为止做了什么吗？

是的，我明白这一点。我正在展示我需要在 Angular 8 中实现的功能示例。你能建议任何方法或任何 npm 包来执行上述功能吗？

我个人会使用 Tailwind 创建搜索字段和下拉菜单，并在搜索字段上使用过滤管道

你在 Facebook 看到过这个功能吗？当我们输入@符号时，他们将是一个下拉列表，我们可以选择我们的朋友。这是我需要在 Angular 中实现的相同功能

【参考方案1】：

我想我已经找到了解决方案。我们可以使用以下 npm 包来创建上述功能。不是完全相同的东西，而是一些有助于解决问题的方法。

https://www.npmjs.com/package/angular-mentions