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

Question

view.html

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

问题是 'text' 有 HTML 我希望按原样显示，但它只显示 HTML 标签和文本。

我该怎么做才能呈现此类内容？

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

Answer 1

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

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

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

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

Answer 3

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

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

Render HTML content in Ionic 3/4/5

typescript

ionic3

angular

ionic4

ionic5