属性绑定 [innerHTML] 正在删除 Angular 4 数据绑定中的锚标记功能答案

【问题标题】：Property Binding [innerHTML] is removing the anchor tag functionality in angular 4 data binding属性绑定 [innerHTML] 正在删除 Angular 4 数据绑定中的锚标记功能
【发布时间】：2018-05-22 09:02:47
【问题描述】：

你好，

属性绑定 [innerHTML] 仅采用原始 html 标记之间的文本，并且锚标记功能未应用于数据绑定。所以我希望锚标签功能应该可以工作。意味着当我在模板中绑定它时，锚标记被删除。我的目标是同时实现innerHTML 和锚标记功能。当我单击任何通知列表项时，它将带我到另一个页面。因为 JSON 只给了我那个数据。有人可以帮帮我吗？

<a data-link="admin-invoice-list" href="javascript:;" [innerHTML]= item.message"></a>

JSON 数据采用以下格式：

{
            "id": "225",
            "message": "<a data-link="/user/121/compliance_details" href="javascript:;">Company has  uploaded a compliance document on the Supplier Hub</a>",
            "status": "0"
}

我们如何在 Angular 4 中实现这一点？

【问题讨论】：

看起来您的item.message 已经是有效的html。如果你不能让它返回原始文本，你可以通过设置其父元素的内部 html 直接将该 html 转储到你的 UI 中。只需确保清理该 html 中的恶意代码即可。参考：stackoverflow.com/questions/31548311/angular-html-binding
是的，它是来自 api 的 json 格式的有效 html，但是当我尝试使用 [innerHTML]="item.message" 之类的属性绑定在模板中进行绑定时，只能在原始 html 之间文本在模板中绑定，但我想在用户点击它时应用点击功能，他应该被带到相应的页面，因为它是 json 格式的。
在 json 中，我得到了这种形式公司已在供应商中心上传了一份合规文件我只采用内部 html 部分，只是我想将数据链接也应用于列表项。我怎样才能实现？我听说过一些概念作为 DOM sanitizer。但是没有明确的工作示例？谁能举个例子？
这是您最终想要的 html 输出吗？ <a data-link="admin-invoice-list" href="javascript:;">Company has uploaded a compliance document on the Supplier Hub</a>?如果是这样，我认为您可以使用一些正则表达式首先解析内部文本并将该内部文本呈现到您的角度模板中。

标签： html angular

【解决方案1】：

DomSanitizer 是你的朋友。

导入所需的：

import { DomSanitizer } from '@angular/platform-browser';

修改组件的构造函数：

constructor(private sanitizer: DomSanitizer) { }

绕过清理：

this.item.message = this.sanitizer.bypassSecurityTrustHtml([yourJsonObj].message) as string;

【讨论】：