Estoy tratando de crear una tubería personalizada Angular2 que genere html sin formato. Quiero que simplemente convierta nuevas líneas en la entrada en saltos de línea HTML. ¿Cómo puedo generar HTML sin procesar desde una tubería angular2?
La siguiente es mi definición de canalización actual, pero se escapa del HTML que no quiero:
import {Pipe, PipeTransform} from '@angular/core'; /* * Converts newlines into html breaks */ @Pipe({ name: 'newline' }) export class NewlinePipe implements PipeTransform { transform(value: string, args: string[]): any { return value.replace(/(?:\r\n|\r|\n)/g, '<br />'); } }EDITAR: solo una nota rápida, ya que esta pregunta parece obtener una cantidad de vistas y actividad, dejo mi respuesta aceptada tal como está, aunque para mi caso de uso de ejemplo específico, css probablemente habría sido una mejor opción y de hecho fue a lo que cambié. Pero mi pregunta real era "¿cómo puedo generar html sin procesar desde una tubería angular 2", no "cuál es la mejor manera de representar saltos de línea", que es lo que muestra la respuesta aceptada.
Sin embargo, tenga cuidado, como se menciona en los comentarios a continuación, si usa el método en la respuesta aceptada, debe asegurarse de no estar procesando una entrada de usuario no verificada, ya que esto podría abrirlo a vulnerabilidades XSS.
También puedes usar CSS puro
<span class="line-breaker"> {{text}} </span> .line-breaker { white-space: pre-line; }La respuesta (que encontré justo después de publicar la pregunta) no es cambiar nada en la definición de la tubería, sino vincularse a [innerHtml] cuando se usa la tubería.
Así que reemplaza esto:
<div class="panel-body"> {{mycontent | newline}} </div>con este:
<div class="panel-body" [innerHtml]="myContent | newline"> </div>Sin embargo, sería bueno si hubiera una forma de hacer esto en la definición de tubería ...
EDITAR: solo una nota rápida, ya que esta respuesta parece atraer una cantidad de votos negativos, la dejo como está, aunque para mi caso de uso de ejemplo específico, css probablemente habría sido una mejor opción y, de hecho, fue lo que cambié. usar.
PERO mi pregunta real era "¿cómo puedo generar html sin procesar desde una tubería angular 2", no "cuál es la mejor manera de representar saltos de línea". Esta respuesta muestra cómo hacer esto.
Sin embargo, TENGA CUIDADO, como se menciona en los comentarios a continuación, si usa el método en esta respuesta, debe asegurarse de no estar procesando una entrada de usuario no verificada, ya que esto podría abrirlo a vulnerabilidades XSS.
Como una variación de la respuesta CSS anterior de Toolkit, si desea que se cuenten los espacios en blanco en lugar de colapsarlos, puede usar el siguiente código en su lugar.
HTML
<span class="line-breaker"> {{text}} </span>CSS
.line-breaker { white-space: pre-wrap; } Lo que hace pre-wrap (además de mostrar saltos de línea y ajuste, etc. como pre-line ) es mostrar cada espacio como un espacio, en lugar de colapsar múltiples espacios en uno.
normal
Las secuencias de espacios en blanco están colapsadas. Los caracteres de nueva línea en la fuente se manejan de la misma manera que otros espacios en blanco. Las líneas se rompen según sea necesario para llenar los cuadros de línea.
ahora rap
Contrae los espacios en blanco como de costumbre, pero suprime los saltos de línea (ajuste de texto) dentro de la fuente.
pre
Las secuencias de espacios en blanco se conservan. Las líneas solo se rompen en los caracteres de nueva línea en la fuente y en los elementos
<br>.pre-envoltura
Las secuencias de espacios en blanco se conservan. Las líneas se dividen en los caracteres de nueva línea, en
<br>y según sea necesario para llenar los cuadros de línea.línea previa
Las secuencias de espacios en blanco están colapsadas. Las líneas se dividen en los caracteres de nueva línea, en
<br>y según sea necesario para llenar los cuadros de línea.
Fuente: https://developer.mozilla.org/en/docs/Web/CSS/white-space