如何将字符串转换为 Angular 中的链接并将链接嵌套到 HTML 中

Posted 2023-05-09

【中文标题】如何将字符串转换为 Angular 中的链接并将链接嵌套到 HTML 中

【英文标题】：How to convert strings to links in Angular and nesting the links into HTML

【发布时间】：2019-08-28 06:51:55

【问题描述】：

所以我正在使用 nodejs 和 Angular 构建一个基本应用程序，用户可以在其中发布可能包含链接的内容，我正在尝试弄清楚如何使他们共享的链接在前端可点击。

我做了一些研究，发现了这个名为 linkify 的库，它可以将字符串转换为链接，但为了使用，您必须使用 innerhtml 属性，我不希望这样做，因为如果用户将 html 代码作为帖子编写，它也会被嵌套。

是否有解决方案让我只嵌套我想要的链接而不是帖子的全部内容？

【参考方案1】：

只需使用角度属性绑定

 <a [href]="website.url" [textContent]="website.name"> </a> 

【讨论】：

这并不能解决我的问题，这是嵌套整个帖子，我想显示帖子的内容并将链接仅嵌套为html标签

为了更好地了解您想要实现的目标。您能否创建一些示例 stackblitz。

假设以这种方式显示我的帖子<div *ngFor="let post of posts"> <p>post.content</p> </div> 基本上这个 post.content 可能包含也可能不包含 url，以防我想将它转换为链接并嵌套到 DOM 中，所以它可以点击

我不想使用 innerhtml 属性，因为如果 post.content 中有一些 html 代码，它也会被嵌套

在这种情况下，我想只有一种方法，您必须使用正则表达式搜索帖子内容中的链接并将其转换为超链接