在 Ionic 中显示预先格式化的 HTML 内容答案

【问题标题】：Displaying pre-formatted HTML content in Ionic在 Ionic 中显示预先格式化的 HTML 内容
【发布时间】：2019-07-04 17:06:36
【问题描述】：

我有需要在 Ionic 中显示的预格式化 HTML 内容（来自第三方）。例如，我有从 DB 获得的问题列表（预格式化的 html），我需要将其显示为 Ionic 中的 Ion-Items 或 Ion-Card 列表。

来自 DB 的示例 HTML 内容：

第一条记录：

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 1</strong></span><br />
  TEXT_DESCRIPTION 1<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

第二次记录

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 2</strong></span><br />
  TEXT_DESCRIPTION 2<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

第三条记录：

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 3</strong></span><br />
  TEXT_DESCRIPTION 3<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

...等等

我想获得有关处理这种情况的最佳做法的建议。任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

您可以使用 Angular 的 DomSanitizer 来显示您的 html。

HTML：

  <div class="details" [innerHtml]="details">
  </div>

</ion-content>

在你的 ts 中：

 displayHTML(data){
        this.details = this.sanitizer.bypassSecurityTrustHtml(data);
 });

别忘了在构造函数中声明：

public sanitizer: DomSanitizer

【讨论】：