Angular 内插 HTML 一个标签元素

Question

我有一个 Angular 模板试图抓取一个字符串，它是一个 HTML 元素，但该字符串没有正确呈现。

Angular Html（仅供参考，这是ng-repeat中的一个子项）：

<div class="right-column">{{item.map[label]}}</div>

该字符串被拉入，基本上将被格式化，例如：

"<a href="..."> target="_blank"> Click Here </a>"

此模板的结果是 DOM 中显示的确切字符串（替换了一些 html 实体）。

DOM 中的结果元素如下所示：

<div class="right-column ng-binding">&lt;a href="..." target="_blank"&gt;Click Here&lt;/a&gt;</div>

我确实注意到，如果我在浏览器开发工具中编辑 HTML 并将 html 实体（&lt 和 &gt）替换为正确呈现 html 元素的实际字符 < 和 >。

我已经尝试在模板中使用 [innerHTML]="item.map[label]" ，这导致没有呈现任何内容。 我也尝试过 ng-bind-html="item.map[label]" ，即使在 controller js 文件中使用 ngSanitize 也会出错。

我不确定还有什么可以尝试进行适当的修复。 如果有一种方法可以格式化传入的字符串，而不会弄乱 angular 模板，那将是首选，因为除了此标记样式之外，还有其他格式传递到模板中。

Answer 1

我看到有错别字

"<a href="..."> target="_blank"> Click Here </a>"

应该：

"<a href="..." target="_blank"> Click Here </a>"

我认为绑定到[innerHTML]应该可以工作，如果它不起作用，您可以告诉 angular HTML 是安全的，您可以通过消毒过程。 您可以通过创建 pipe 来实现它，该 pipe 在 HTML 字符串上应用DomSanitizer的bypassSecurityTrustHtml 。 示例 slackblitz：

https://stackblitz.com/edit/angular-2baxog

作为参考，你在这里阅读更多Angular HTML 绑定