如何在Angular 2中通过ng-for将HTML字符串转换为真实的HTML元素？

Question

据我所知,在角度1.x中,我可以使用$ sce服务来满足我的要求

myApp.filter('trustAsHTML', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

并在html文件中使用这样的

{{ htmlString || trustAsHTML }}

是否有像$ sce或某些管道的服务或任何方法可以胜任在angularjs 2版本中做到这一点？

Answer 1

最简单的解决方案

<div [innerHTML]="some_string"></div>

哪里some_string可以是html代码,例如:some_string = "<b>test</b>".

没有管道或任何需要的东西 Angular 2.0支持

Answer 2

在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>";
  }
}

这是一个带有天真html转义/解析的plnkr.

我希望它有帮助:)