如何通过 Angular 2 中的 ng-for 将 HTML 字符串转换为真正的 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33472297/
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
How to translate HTML string to real HTML element by ng-for in Angular 2?
提问by Garry
As I know, in angular 1.x I can use $sce service to meet my requirment like this
据我所知，在 angular 1.x 中，我可以使用 $sce 服务来满足我这样的要求
myApp.filter('trustAsHTML', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
and in html file use like this
并在 html 文件中像这样使用
{{ htmlString || trustAsHTML }}
Does there has a service like $sce or some pipe or any method can be competent to do that in angularjs 2 version?
在 angularjs 2 版本中是否有像 $sce 这样的服务或一些管道或任何方法可以胜任？
回答by Vingtoft
Simplest solution:
最简单的解决方案：
<div [innerHTML]="some_string"></div>
Where some_stringcan be html code, e.g: some_string = "<b>test</b>".
哪里some_string可以是 html 代码，例如：some_string = "<b>test</b>".
No pipes or anything needed. Supported by Angular 2.0
不需要管道或任何东西。由 Angular 2.0 支持
回答by Eric Martinez
In angular2 there's no ng-include, trustAsHtml, ng-bind-htmlnor 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.
在 angular2 中没有ng-include, trustAsHtml，ng-bind-html也没有类似的，所以你最好的选择是绑定到innerHtml. 显然，这让您可以接受所有类型的攻击，因此您可以解析/转义内容，为此您可以使用管道。
@Pipe({name: 'escapeHtml', pure: false})
class EscapeHtmlPipe implements PipeTransform {
transform(value: any, args: any[] = []) {
// Escape 'value' and return it
}
}
@Component({
selector: 'hello',
template: `<div [innerHTML]="myHtmlString | escapeHtml"></div>`,
pipes : [EscapeHtmlPipe]
})
export class Hello {
constructor() {
this.myHtmlString = "<b>This is some bold text</b>";
}
}
Here's a plnkrwith a naive html escaping/parsing.
这是一个带有天真的 html 转义/解析的plnkr。
I hope it helps :)
我希望它有帮助:)
回答by Javier Perez
I got Same Problem buy I Request the decode HTML from Backend and them you can inject html to your page
我遇到了同样的问题，我从后端请求解码 HTML，他们可以将 html 注入到您的页面
// YOUR TS
@Component({
selector: 'page',
templateUrl: 'page.html'
})
export class Page {
inject:any;
constructor( ) { }
ionViewDidLoad() {
this.inject='your HTML code'
}
}// YOU HTML PAGE
<div [innerHTML]="inject"></div>回答by AdroitSJ
The best solution which can be of your help is as below:
可以为您提供帮助的最佳解决方案如下：
<p [innerHTML]=your_response_which_is_string></p>
Hope it helps!!!
希望能帮助到你！！！
回答by him
For property binding use below :<div innerHtml="{{ property }}"></div>
对于下面的属性绑定使用：<div innerHtml="{{ property }}"></div>
For just a string :<div [innerHtml]="<p>property</p>"></div>
对于一个字符串：<div [innerHtml]="<p>property</p>"></div>
