example - ¿Cómo traducir una cadena HTML a un elemento HTML real mediante ng-for en Angular 2?

ngfor angular 4 example

Question

Como sé, en angular 1.x puedo usar el servicio $ sce para cumplir con mi requisito como este

myApp.filter(''trustAsHTML'', [''$sce'', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);

y en el uso de archivos html como este

{{ htmlString || trustAsHTML }}

¿Tiene un servicio como $ sce o alguna tubería o algún método puede ser competente para hacerlo en la versión angularjs 2?

Answer 1

En angular2 no hay ng-include , trustAsHtml , ng-bind-html ni similar, por lo que su mejor opción es enlazar a innerHtml . Obviamente, esto te permite abrirte a todo tipo de ataques, por lo que depende de ti analizar / escapar el contenido y para eso puedes usar tuberías.

@Pipe({name: ''escapeHtml'', pure: false})
class EscapeHtmlPipe implements PipeTransform {
transform(value: any, args: any[] = []) {
// Escape ''value'' and return it
}
}
@Component({
selector: ''hello'',
template: `<div [innerHTML]="myHtmlString | escapeHtml"></div>`,
pipes : [EscapeHtmlPipe]
})
export class Hello {
constructor() {
this.myHtmlString = "<b>This is some bold text</b>";
}
}

Aquí hay un plnkr con un html / escape ingenuo.

Espero que ayude :)

Answer 2

Tengo el mismo problema. Compro. Solicito el código HTML de decodificación del Backend y puedes inyectar html en tu página.

// YOUR TS
@Component({
selector: ''page'',
templateUrl: ''page.html''
})
export class Page {
inject:any;
constructor( ) { }
ionViewDidLoad() {
this.inject=''your HTML code''
}
}

// YOU HTML PAGE
<div [innerHTML]="inject"></div>

Answer 3

La solución más simple:

<div [innerHTML]="some_string"></div>

Donde some_string puede ser código html, por ejemplo: some_string = "<b>test</b>" .

No hay tuberías ni nada necesario. Soportado por Angular 2.0

Answer 4

Para el uso de enlaces de propiedades a continuación: <div innerHtml="{{ property }}"></div>

Para solo una cadena: <div [innerHtml]="<p>property</p>"></div>