javascript - Angular 2 的样式属性清理是否有安全的解决方法？

Question

我目前正在学习 Angular 2，我正试图从组件的属性中加载带有样式属性的 HTML。

items.push('<span style="color: ' + colorHex + ';">test</span>');

<div class="itemList" *ngFor="let item of items">
    <pre [innerHtml]=item></pre>
</div>

经过一些研究后，Angular 2 似乎清理了样式属性以防止安全问题。我接近这个错误吗？我还能如何将颜色附加到文本？我正在使用 <font>标记，但在 HTML5 中已弃用。

Answer 1

您是否尝试过使用 style binding target (在页面上搜索“样式”)？它展示了如何在 html 元素上设置单独的样式属性。例如，这是一种应用您询问的颜色样式的方法。

<div class="itemList" *ngFor="let item of items">
    <pre [style.color]="colorHex">Test</pre>
</div>