HTML标签元素的角度插值答案

【问题标题】：Angular Interpolation for HTML a tag elementHTML标签元素的角度插值
【发布时间】：2022-02-03 06:30:30
【问题描述】：

我有一个 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]" ，即使在控制器 js 文件中使用 ngSanitize 也会出错。

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

【问题讨论】：

标签： javascript html angular

【解决方案1】：

我发现有错别字

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

应该是：

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

我认为绑定到[innerHTML] 应该可以工作，如果它不起作用，您可以告诉 Angular HTML 是安全的，并且您可以通过清理过程。您可以通过创建一个在 HTML 字符串上应用DomSanitizer 的bypassSecurityTrustHtml 的管道来实现它。示例 slackblitz：

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

作为参考，您可以在此处阅读更多内容 Angular HTML binding

【讨论】：

感谢您的回复。我在想创建一个管道来运行 byPassSecurityTrustHtml 可能是使它正常工作的唯一方法。我关注了你的 slackblitz，但我在努力制作真正的管道课程。我不确定如何引入导入： import { Pipe } from '@angular/core';从“@angular/platform-browser”导入 { DomSanitizer }；这些都没有得到认可。我尝试添加相应的依赖项/开发依赖项，但没有成功。
@adamcole ，您是否在declarations 中添加了管道，存在于app.module.ts 中？你是说import { Pipe } from '@angular/core'; 等给你的错误是它们在 angular/core 中不存在？