typescript Angular 2 禁用消毒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39524536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 disable sanitize
提问by Maris
I am trying to render base64 string into <img src='data:image/png;base64,${Here}'.
我正在尝试将 base64 字符串呈现为<img src='data:image/png;base64,${Here}'.
But always when I try to render it, ng2 sanitizing my base64 string before rendering it adds something into my value before showing it in DOM. I have found workaround(using DomSanitizer) but it doesn't work on latest versions.
但是总是当我尝试渲染它时，ng2 在渲染它之前清理我的 base64 字符串，在它在 DOM 中显示它之前将它添加到我的值中。我找到了解决方法（使用 DomSanitizer），但它不适用于最新版本。
Here is my markup:
这是我的标记：
<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}">
And here is my component part:
这是我的组成部分：
imgBase64="SomeBase64StringFetchedSomehow";
But angular2 is showing in console next message - WARNING: sanitizing unsafe URL value
但是 angular2 显示在控制台的下一条消息中 - WARNING: sanitizing unsafe URL value
How to prevent NG2 from sanitizing my base64 string?
如何防止 NG2 清理我的 base64 字符串？
Update
更新
get getImg() {
return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);
}
Doesn't solve this issue. DomSanitizer class does not exists anymore in RC6
不解决这个问题。DomSanitizer 类在 RC6 中不再存在
采纳答案by Maris
After few hours of researches I have finally found that in latest version of ng2 there is no DomSanitizerthat can be injected using DI, however there is Sanitizer. So here is the usage:
经过几个小时的研究，我终于发现在最新版本的 ng2 中没有DomSanitizer可以使用 DI 注入的，但是有Sanitizer. 所以这是用法：
constructor( private _sanitizer: Sanitizer){
}
get getImg() {
return this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.img}`);
}
<input src="{{getImg}}"/>
As you can see first argument of sanitizemethod is SecurityContextinstance, which basically is enum. So right now Sanitizeris a factory which choose the implementation to use based on SecurityContext
如您所见，sanitize方法的第一个参数是SecurityContext实例，它基本上是枚举。所以现在Sanitizer是一个工厂，它根据以下条件选择要使用的实现SecurityContext
In my case I had a problem that my base64 was sanitized before that get, that why I was not able to get it working.
在我的情况下，我遇到了一个问题，我的 base64 在获取之前就已经过消毒，这就是为什么我无法让它工作的原因。
回答by Günter Z?chbauer
You need to explicitly tell Angular2 that the string is trusted
您需要明确告诉 Angular2 该字符串是可信的
https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
constructor(private sanitizer:DomSanitizer) {}
get imgBase64() {
this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,$SomeBase64StringFetchedSomehow');
}
<img alt="RegularImage" [src]="imgBase64">
See also In RC.1 some styles can't be added using binding syntax
回答by John Langford
After unsuccessfully trying to get the bypassSecurityTrust... functions to work, I resorted to the following:
在尝试让 bypassSecurityTrust... 功能工作失败后，我采取了以下措施：
@ViewChild('div_element_id') private div_element_id: ElementRef;
...
this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;
