javascript - ionic 2/Angular 2 : string replaced with HTML tag isn't rendered properly

Question

我的 JSON 中有一系列内容其中包含 URLs在那里作为文本。我想查找并替换那些文本 URLs与链接。到底发生了什么？它确实将 URL 替换为 <a>在 href="" 中标记和正确的 URL但仍然渲染这个 <a>标记为文本而不是 HTML

urlifyContent(){
   let urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
   for (let index = 0; index < this.message.Content.length; ++index){
       this.message.Content[index] = this.message.Content[index].replace(urlRegex,`"<a href='$1'target='_blank'>$1</a>"`);
   }
}

Answer 1

根据您的评论，您正在使用 {{message.Content}} 绑定(bind)您使用 urlifyContent() 方法创建的 html。这将不起作用，因为 {{}} 会将值解析为字符串，而不是 HTML。

要将 HTML 添加到您的页面，您应该使用 [innerHTML] 指令:

<div [innerHTML]="message.Content"></div>

但是，值得一提的是，这不会解析该 HTML 片段中存在的任何 Angular 组件或指令或绑定(bind)。它应该只是纯 html