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

Posted 2023-03-13

【中文标题】如何在Angular2中绑定原始html [重复]

【英文标题】：How to bind raw html in Angular2 [duplicate]

【发布时间】：2016-04-07 17:30:18

【问题描述】：

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

我尝试使用

myField

但 myField 中的文本会被转义。

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

谢谢 弗兰克

【参考方案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 的内容。完成这项工作的唯一方法是在运行时创建和编译组件。

***.com/questions/35080387/… 角度事件听“NICE STUFF”

我不确定这是否是对规范的更新，但在 Angular 5+ 中，它现在是来自 @angular/platform-b​​rowser 的 DomSanitizer 而不是 @angular/core 的 Sanitizer类。

@GünterZöchbauer 是的，我同意，我只是想指出这一点，以便人们首先考虑这一点，而不仅仅是在所有情况下都复制管道。