Angular2 innerHtml绑定删除样式属性 [英] Angular2 innerHtml binding remove style attribute
本文介绍了Angular2 innerHtml绑定删除样式属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的问题是,当我使用innererHtml绑定时-angular2删除了所有样式属性.这对我来说很重要,因为在我的任务中-html是在服务器端以所有样式生成的. 示例:
My problem, that when I use innererHtml binding - angular2 remove all styles attributes. It's important for me, bacause in my task - html is generated on server-side with all styles. Example:
@Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="html">
<div [innerHtml]="html">
</div>
`,
})
export class App {
name:string;
html: string;
constructor() {
this.name = 'Angular2'
this.html = "<span style=\"color:red;\">1234</span>";
}
}
但是在DOM中,我只能看到1234,并且该文本不是红色.
But in DOM I see only 1234 and this text is not red.
http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview
谢谢!
推荐答案
您可以利用DomSanitized
避免它.
最简单的方法是创建自定义管道,例如:
The easiest way is to create custom pipe like:
import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
所以您可以像这样使用它:
So you can use it like:
<div [innerHtml]="html | safeHtml"></div>
Plunker Example
这篇关于Angular2 innerHtml绑定删除样式属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文