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>