如何在 Angular2 中绑定原始 html [英] How to bind raw html in Angular2

问题描述

我使用 Angular 2.0.0-beta.0，我想直接创建和绑定一些简单的 HTML.是可能的吗?

I use Angular 2.0.0-beta.0 and I want to create and bind some simple HTML directly. Is is possible and how?

我尝试使用

{{myField}}

但 myField 中的文本将被转义.

but the text in myField will get escaped.

对于 Angular 1.x，我找到了 ng-bind-html 的命中率，但这在 2.x 中似乎不受支持

For Angular 1.x i found hits for ng-bind-html, but this seems not be supported in 2.x

谢谢弗兰克

推荐答案

绑定到 innerHTML 属性

有两种实现方式:

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

将传递的 HTML 标记为受信任，以便 Angulars DOM sanitizer 不会剥离部分

To mark the passed HTML as trusted so that Angulars DOM sanitizer doesn't strip parts of

<div [innerHTML]="myField | safeHtml"></div>

像管子一样

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另见 在RC.1 某些样式无法使用绑定语法添加

这篇关于如何在 Angular2 中绑定原始 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！