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

Question

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

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

  <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但这些似乎都不是正确的方法。

Answer 1

通过 typescript：

@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>