如何解析 html 字符串并将其添加到 Angular 中的 DOM答案

【问题标题】：How to parse an html string and add it to the DOM in Angular如何解析 html 字符串并将其添加到 Angular 中的 DOM
【发布时间】：2021-07-22 01:29:38
【问题描述】：

我正在使用带有 Angular 应用程序的内容服务。一些 API 查询会返回包装在 html 标记中的字符串。 "<p>Example value from API</p>"。我需要解析这些字符串并将它们作为 html 元素添加到 DOM。

如果我将 API 响应保存到 question.body.value，然后执行以下操作：

  <div *ngIf="question">
    {{ question.body.value }}
  </div>

不解析 html。相反，它只会产生一个看起来像这样的div（包装<p>标签打印到屏幕上）：

<div _ngcontent-iws-c79="" class="ng-star-inserted">
 "<p>Example value from API</p>"
</div>

将这些解析为 html 元素并将它们添加到 DOM 的 Angular 方法是什么？我已经尝试过 Angular Renderer2 和原生 Javascript DOMParser，但这些似乎都不是正确的方法。

【问题讨论】：

这里有几个选项可以做到这一点：stackoverflow.com/questions/9381926/…
您不能直接粘贴 html，因为它不“安全”。
应该可以工作
谢谢@MikeOne [innerHtml] 作品。

标签： javascript angular dom

【解决方案1】：

通过打字稿：

@ViewChild('elementRef') public elementRef: ElementRef;
public htmlString = '<b>Random string</b>';
public addHTML(): void {
  this.elementRef.nativeElement.innerHTML = htmlString;
}

通过html：

<div #elementRef [innerHtml]="htmlString"></div>

【讨论】：