angular - 如何在Angular2中绑定(bind)原始html

Question

这个问题在这里已经有了答案:





Angular HTML binding

(24 个回答)


6年前关闭。




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

我试着用

{{myField}}

但 myField 中的文本会被转义。

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

谢谢
坦率

Answer 1

绑定(bind)到 innerHTML属性

有2种方法可以实现:

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

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

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

用 pipe

@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
  }
}

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