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。

我希望它有所帮助：）

Answer 3

我遇到了同样的问题我从后端请求解码HTML并且你可以将html注入你的页面

＆＃13;

// YOUR TS
@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page {
  inject:any;
  constructor( ) { }

  ionViewDidLoad() {
    this.inject='your HTML code'

  }

}

＆＃13;

// YOU HTML PAGE

<div [innerHTML]="inject"></div>

＆＃13;

Answer 4

可能对您有帮助的最佳解决方案如下：

<p [innerHTML]=your_response_which_is_string></p>

希望有帮助！

Answer 5

对于以下属性绑定使用： <div innerHtml="{{ property }}"></div>

仅限字符串： <div [innerHtml]="<p>property</p>"></div>

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

5 个答案: