![DomSanitizer]( "DomSanitizer")
本文介绍了Angular 2、DomSanitizer、bypassSecurityTrustHtml、SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在将 DomSanitizer 与 html 字符串中的 SVG 一起使用.
在当前版本的 Angular 之前，这工作得很好:
this.domSanitizer.bypassSecurityTrustHtml(content);
现在我得到一个叫做
的对象SafeHtmlImpl {changeThisBreaksApplicationSecurity: " blah </svg>"}改变ThisBreaksApplicationSecurity
现在有访问 DomSanitizer 输出的新方法吗?我应该以 SafeHTML 类型或其他方式接收它吗?如果 bypassSecurityTrustHtml 仍然过滤 html，那么它有什么意义?
明信片上有答案吗?请...
解决方案
DEMO : https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview
import { DomSanitizer } from '@angular/platform-browser'@Pipe({ 名称:'safeHtml'})导出类 SafeHtmlPipe 实现 PipeTransform {构造函数(私有消毒:DomSanitizer){}变换(值){console.log(this.sanitized.bypassSecurityTrustHtml(value))返回 this.sanitized.bypassSecurityTrustHtml(value);}}@成分({选择器:'我的应用'，模板:`<div [innerHtml]="html | safeHtml">
`，})出口类应用{名称:字符串；html:安全html；构造函数(){this.name = 'Angular2'this.html = "<svg>等等</svg>";}}
I've been using DomSanitizer with an SVG in an html string.
Previous to the current version of Angular, this worked just fine:
this.domSanitizer.bypassSecurityTrustHtml(content);
Now I am getting an object back called
SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity
Is there now a new way to access the output of the DomSanitizer? Should I be receiving it as SafeHTML type or something? What's the point in having bypassSecurityTrustHtml if it still filters html?
Any answers on a postcard? Please...
解决方案
DEMO : https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
console.log(this.sanitized.bypassSecurityTrustHtml(value))
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
@Component({
selector: 'my-app',
template: `
<div [innerHtml]="html | safeHtml">
</div>
`,
})
export class App {
name:string;
html: safeHtml;
constructor() {
this.name = 'Angular2'
this.html = "<svg> blah </svg>";
}
}
这篇关于Angular 2、DomSanitizer、bypassSecurityTrustHtml、SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！