Angular2 innerHtml删除样式 [英] Angular2 innerHtml removes styling
本文介绍了Angular2 innerHtml删除样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用innerHtml并将html设置在我的cms中，响应似乎还可以，如果我像这样打印它: {{ poi.content }}
I am using innerHtml and set the html in my cms the response seems okay and if I print it like this: {{ poi.content }}
它给了我正确的内容: `
it gives me the right content back : `
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">Tes11t</td>
<td style="width: 2px;"> </td>
<td style="width: 1px;"><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" style="height: 67px; width: 100px;" /></td>
</tr>
</tbody>
</table>
`
但是当我使用[innerHtml]="poi.content"时，它给了我这个html:
But when I use [innerHtml]="poi.content" it gives me this html back:
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>Tes11t</td>
<td> </td>
<td><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg"></td>
</tr>
</tbody>
</table>
有人知道为什么当我使用[innerHtml]
Does anybody know why it is stripping my styling when I use [innerHtml]
推荐答案
Angular2清除了动态添加的HTML，样式，...
Angular2 sanitizes dynamically added HTML, styles, ...
@Pipe({name: 'safeHtml'})
export class Safe {
constructor(private sanitizer:DomSanitizer){}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
[innerHtml]="poi.content | safeHtml"
请参见
- https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
- 在RC中. 1有些样式无法使用绑定语法添加 有关更多详细信息.
- https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
- In RC.1 some styles can't be added using binding syntax for more details.
这篇关于Angular2 innerHtml删除样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
