Angular2 innerHtml binding remove style attribute

Mi problema es que cuando uso el enlace innererHtml – angular2, elimino todos los atributos de los 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: `  
`, }) export class App { name:string; html: string; constructor() { this.name = 'Angular2' this.html = "1234"; } }

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

¡Gracias!

Puede aprovechar DomSanitized para evitarlo. La forma más fácil es crear tubos personalizados 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:

 

Ejemplo de Plunker

Mejoré un poco el ejemplo de yurzui completando 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 { } 

Angular 2 tiene como objective un enfoque más declarativo , por lo que a menudo se desalienta la manipulación directa de HTML.

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

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://stackoverflow.com/a/41089093/142714

Por lo tanto, bypassSecurityTrustStyle también puede ser lo que desee 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