如何通过NG-对角2翻译HTML字符串实际html元素 [英] How to translate html string to real html element by ng-for in angular 2
问题描述
据我所知,在角1.x中,我可以使用$ SCE的服务来满足我的需要量这样
As I know, in angular 1.x I can use $sce service to meet my requirment like this
myApp.filter('trustAsHTML', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
和在HTML文件中使用这样的
and in html file use like this
{{ htmlString || trustAsHTML }}
是否出现了像$ SCE或某些管道或任何方法的服务可以胜任,在angularjs 2版本?
Does there has a service like $sce or some pipe or any method can be competent to do that in angularjs 2 version?
推荐答案
在angular2没有 NG-包括
, trustAsHtml
, NG-绑定-HTML
也不是相似的,所以你最好的选择是绑定到的innerHTML
。显然,这让你对所有类型的攻击开放的,所以它是由你来解析/逃避内容和可以使用的管道。
In angular2 there's no ng-include
, trustAsHtml
, ng-bind-html
nor similar, so your best option is to bind to innerHtml
. Obviously this let you open to all kind of attacks, so it's up to you to parse/escape the content and for that you can use pipes.
@Pipe({name: 'escapeHtml', pure: false})
class EscapeHtmlPipe implements PipeTransform {
transform(value: any, args: any[] = []) {
// Escape 'value' and return it
}
}
@Component({
selector: 'hello',
template: `<div [inner-html]="myHtmlString | escapeHtml"></div>`,
pipes : [EscapeHtmlPipe]
})
export class Hello {
constructor() {
this.myHtmlString = "<b>This is some bold text</a>";
}
}
下面是一个 plnkr 用天真的HTML转/解析。
Here's a plnkr with a naive html escaping/parsing.
我希望它能帮助:)
这篇关于如何通过NG-对角2翻译HTML字符串实际html元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!