在 Ionic 3/4/5 中渲染 HTML 内容答案

【问题标题】：Render HTML content in Ionic 3/4/5在 Ionic 3/4/5 中渲染 HTML 内容
【发布时间】：2017-11-29 07:00:42
【问题描述】：

view.html

<div>{{text}}</div>

问题是“文本”有我希望显示的 HTML，但它只显示 HTML 标记和文本。

我可以做些什么来呈现这些内容？

我已经尝试过早期版本 (Ionic 1/2) 的解决方案，但 Ionic v3 似乎没有任何效果。

【问题讨论】：

标签： angular typescript ionic3 ionic4 ionic5

【解决方案1】：

您应该像这样使用innerHTML 属性绑定：

<div [innerHTML]="text"></div>

请查看Angular docs 了解更多信息。

【讨论】：

编辑：innerHTML 也可以工作——但完全非大写的不行。
它在其他情况下对我有用，：我使用了 Youtube API，它带有像 &quote; 这样的编码文本。 .但是这个解决方案给了我我想要的原始符号。谢谢兄弟,,,

【解决方案2】：

如果你想把它写成段落，你可以这样做

<p><span [innerHTML]="htmlObject"></span></p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

【讨论】：

【解决方案3】：

此解决方案有效，但某些 css 在 html 中无效。就像我们从后端获得了正确的数据，但不适用于 innerhtml 。

【讨论】：