如何在Angular2中绑定原始HTML

Question

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

我尝试使用了以下代码：

{{myField}}

但是myField中的文本将被转义。

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

谢谢 Frank

- fbenoit

Answer 1

绑定到 innerHTML 属性

有两种实现方法：

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

为了将已传递的 HTML 标记为受信任状态，以便 Angular 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(value);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另请参阅在 RC.1 中，某些样式不能使用绑定语法添加

- Günter Zöchbauer

---

你不能使用[innerHTML]="..."绑定来添加任何Angular特定的内容。使其工作的唯一方法是在运行时创建和编译组件。 - Günter Zöchbauer

Plunker使用的是旧版Angular，该版本不需要也没有santizer。 - Günter Zöchbauer

动态添加事件监听器在Angular 2中的实现方式，"NICE STUFF" - k11k2

我不确定这是否是规范的更新，但在Angular 5+中，现在使用的是@angular/platform-browser的DomSanitizer而不是Sanitizer，后者是@angular/core类。 - LeftOnTheMoon

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