ionic-framework - 在 Ionic 中显示预先格式化的 HTML 内容
问题描述
我已经预先格式化了需要在 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>
...等等
我想获得有关处理这种情况的最佳实践的建议。任何帮助将不胜感激。谢谢!
解决方案
您可以使用 Angular 的 DomSanitizer 来显示您的 html。
网页:
<div class="details" [innerHtml]="details">
</div>
</ion-content>
在你的 ts 中:
displayHTML(data){
this.details = this.sanitizer.bypassSecurityTrustHtml(data);
});
不要忘记在构造函数中声明:
public sanitizer: DomSanitizer
推荐阅读
- java - 扫描文件并一次获取两个令牌并将它们保存在 ArrayList 中
- c++ - 调整大小的 C++ HashTable 二次探测插入方法不起作用?
- excel - 没有嵌套 IF 的多个 IF 语句
- flurl - 如何使用 Flurl v3.0.0 自动记录响应
- java - JPA - 如何持久化具有自动生成 id 的实体及其关联实体
- c# - 使用 Unity.5.6.5 和脚本引用的 NullReferenceException
- python - python链接结构 - 将子节点插入节点A的父节点也插入节点A
- xcode - 尝试将应用程序二进制文件上传到 App Store Connect 时 Xcode 12 出错
- html - HTML:如何使用 href 链接到以 # 字符开头的文件名
- mysql - 从云 api 到本地数据库的多个 spring jpa 实体持久性