Отображение предварительно отформатированного содержимого HTML в Ionic

Question

У меня есть предварительно отформатированный контент HTML (от стороннего производителя), который мне нужно отобразить в Ionic.Например, у меня есть список вопросов (предварительно отформатированный html), которые я получаю из БД, которые мне нужно отобразить в виде списка Ion-Items или Ion-Card в Ionic.

Пример содержимого 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>

... и т. Д.

Я хочу получить предложения, касающиеся передовых методов работы с этим сценарием.Любая помощь будет высоко оценен.Спасибо!

Answer 1

Вы можете DomSanitizer от Angular, чтобы отобразить ваш HTML.

HTML:

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

</ion-content>

А в твоем тс:

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

Не забудьте объявить в конструкторе:

public sanitizer: DomSanitizer