如何在Angular2中绑定原始html

时间:2016-01-04 05:58:58

标签: angular

我使用Angular 2.0.0-beta.0,我想直接创建和绑定一些简单的HTML。是可能的以及如何?

我尝试使用

{{myField}}

但myField中的文本将被转义。

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

THX 弗兰克

1 个答案:

答案 0 :(得分:146)

绑定到innerHTML属性

有两种方法可以实现:

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

将传递的HTML标记为可信,以便Angulars DOM清洁剂不会剥离部分

<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(html);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另见In RC.1 some styles can't be added using binding syntax