style - Angular2 innerHtml vinculante eliminar atributo de estilo

ng bind html angular 4

Question

Esta pregunta ya tiene una respuesta aquí:

• En RC.1, algunos estilos no se pueden agregar utilizando la sintaxis de enlace 1 respuesta

Mi problema es que cuando uso el enlace innererHtml - angular2 elimino todos los atributos de estilos. Es importante para mí, porque en mi tarea: html se genera en el lado del servidor con todos los estilos. Ejemplo:

@Component({
  selector: ''my-app'',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
  `,
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = ''Angular2''
    this.html = "<span style=/"color:red;/">1234</span>";
  }
}

Pero en DOM solo veo 1234 y este texto no es rojo.

http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview

¡Gracias!

Answer 1

Angular 2 apunta a un enfoque más declarativo , por lo que a menudo se desaconseja manipular directamente HTML.

Creo que (casi) todas las manipulaciones HTML están parcheadas para ser filtradas por la desinfección DOM de angular. Como puede imaginar style atributos de style no están en la lista blanca para los elementos span, de hecho, span no tiene atributos permitidos en este momento.

Answer 2

Mejoré un poco el ejemplo de yurzui al completar las importaciones necesarias:

import {DomSanitizer} from ''@angular/platform-browser'';
import {PipeTransform, Pipe} from "@angular/core";

@Pipe({ name: ''safeHtml''})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

También tuve que agregar la clase en mi archivo app.module.ts

import ...
import {SafeHtmlPipe} from "./pipes/safehtml.pipe";
@NgModule({
    declarations: [
        AppComponent,
        ...,
        SafeHtmlPipe  <--
    ],
    imports: [...],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 3

Puede aprovechar DomSanitized para evitarlo.

La forma más fácil es crear una tubería personalizada como:

import { DomSanitizer } from ''@angular/platform-browser''
import { PipeTransform, Pipe } from "@angular/core";

@Pipe({ name: ''safeHtml''})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

Entonces puedes usarlo como:

<div [innerHtml]="html | safeHtml"></div>

Ejemplo de Plunker

Answer 4

Tenga en cuenta que el sanitizer tiene algunos métodos para confiar en el contenido, por ejemplo

return this.sanitizer.bypassSecurityTrustStyle(value);
return this.sanitizer.bypassSecurityTrustHtml(value);
return this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1]

a través de https://.com/a/41089093/142714

Entonces, bypassSecurityTrustStyle también puede ser lo que desea aquí, ya que esto mostrará estilos en línea dentro de su contenido HTML ( value ).

[1] documentos: https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html