提问人：Shbenzer 提问时间：11/3/2022 最后编辑：Shbenzer 更新时间：11/22/2022 访问量：132
Angular 中的 HTML/富文本是否有替代 ngb-highlight 的替代方案？
Is there an alternative to ngb-highlight for HTML/Rich Text in Angular?
问：
我正在将应用程序转换为使用 html/rich-text 而不仅仅是普通应用程序，并希望保持 ngb-highlight 之类的东西提供的易用性。
我能够自己手动搜索/过滤文本，但希望保留 ngb-highlight 元素具有的预输入突出显示/搜索功能。不幸的是，我发现在元素中显示 html 的唯一方法是使用 [innerHTML] 属性，但这会覆盖 ngb-highlight 的 [result]-[term] 关系。
我还没有找到一个可靠的替代方案，我想在承诺自己构建解决方案之前提出这个问题。
答：
0赞
Shbenzer
11/22/2022
#1
我解决了这个问题，并认为我会帮助任何有类似问题的人：
我发现最简单的解决方案是构建你自己的 angular 指令并实现它，如下所示：
<label [customDirective]="searchText" innerHTML="myRichText"></label>
或者构建自定义管道并实现它，如下所示：
<label innerHTML=" myRichText | customPipe: searchText"></label>
我最终使用了 pipe 方法，因为它是一个更简单的实现，但是我的 pipe 只做 2 件事（向 html 添加粗体，并对 searchText 的更改做出实时反应）。如果你想添加更多功能，我建议你进一步研究构建自定义角度指令。
另外：使用管道还有一个额外的好处，即如果你愿意，允许你在返回时通过DOMsanitizer推送你的数据，让你通过angular的内置卫生协议。但这样做的风险由您自己承担，因为如果您不能完全控制通过管道的 richText/html，它会为 XSS 攻击引入途径。
评论