如何在Angular2中绑定原始html [重复]答案

【问题标题】：How to bind raw html in Angular2 [duplicate]如何在Angular2中绑定原始html [重复]
【发布时间】：2016-04-07 17:30:18
【问题描述】：

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

我尝试使用

{{myField}}

但 myField 中的文本会被转义。

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

谢谢弗兰克

【问题讨论】：

标签： angular

【解决方案1】：

绑定到innerHTML属性

有两种实现方式：

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

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

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

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

【讨论】：

我正在使用相同的东西来防止它剥离点击事件，但现在点击事件不会触发，我已经看到其他答案说明动态事件点击，但我如何进行点击在上面提到的这种简单情况下工作
您不能使用 [innerHTML]="..." 绑定添加任何特定于 Angular 的内容。完成这项工作的唯一方法是在运行时创建和编译组件。
stackoverflow.com/questions/35080387/… 角度事件听“NICE STUFF”
我不确定这是否是对规范的更新，但在 Angular 5+ 中，它现在是来自 @angular/platform-browser 的 DomSanitizer 而不是 @angular/core 的 Sanitizer类。
@GünterZöchbauer 是的，我同意，我只是想指出这一点，以便人们首先考虑这一点，而不仅仅是在所有情况下都复制管道。