documentacion - Cómo enlazar html sin formato en Angular2

router events subscribe angular 4

Question

Esta pregunta ya tiene una respuesta aquí:

• Enlace angular HTML 17 respuestas

Uso Angular 2.0.0-beta.0 y quiero crear y enlazar un HTML simple directamente. ¿Es posible y cómo?

Traté de usar

{{myField}}

pero el texto en myField se escapará.

Para Angular 1.xi se encontraron coincidencias para ng-bind-html, pero esto parece no ser compatible con 2.x

gracias Frank

Answer 1

Enlace al atributo innerHTML

Hay 2 formas de lograr:

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

Para marcar el HTML aprobado como confiable para que Angulars DOM sanitizer no elimine partes de

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

con una pipa como

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

Consulte también En RC.1, algunos estilos no se pueden agregar utilizando la sintaxis de enlace