Tubos Angular2: HTML raw de salida
Estoy tratando de crear una tubería personalizada Angular2 que produzca html sin procesar. Quiero que simplemente convierta nuevas líneas en la entrada en saltos de línea HTML. ¿Cómo obtengo HTML raw de una tubería angular2?
La siguiente es mi definición de tubería actual, pero escapa al 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 serie de vistas y actividad que estoy dejando mi respuesta aceptada como está, a pesar de que para mi ejemplo específico de caso de uso css probablemente habría sido una mejor opción y fue en realidad a lo que cambié. Pero mi pregunta real era "cómo hago la salida de html raw de 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.
Tenga cuidado, sin embargo, como se menciona en los comentarios a continuación, si utiliza el método en la respuesta aceptada, debe asegurarse de que no está procesando la entrada del usuario sin marcar, ya que esto podría abrirle a vulnerabilidades XSS.
6 answers
También puedes usar CSS puro
<span class="line-breaker">
{{text}}
</span>
.line-breaker {
white-space: pre-line;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-04 11:15:34
La respuesta (que encontré justo después de publicar la pregunta) no es cambiar nada en la definición de tubería, sino enlazar a [innerHTML] cuando se usa la tubería.
Así que reemplace esto:
<div class="panel-body">
{{mycontent | newline}}
</div>
Con esto:
<div class="panel-body" [innerHtml]="myContent | newline">
</div>
Sería bueno si hubiera una manera de hacer esto en la definición de tubería...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-13 02:47:53
Como una variación de la respuesta CSS anterior por Toolkit, si desea que los espacios en blanco se cuenten en lugar de contraerse, 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 envolver, etc. como pre-line) es mostrar cada espacio como un espacio, en lugar de colapsar varios espacios en uno.
Normal
Las secuencias de espacios en blanco se contraen. Nueva línea los caracteres de 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.
Nowrap
Contrae los espacios en blanco como en el caso normal, pero suprime los saltos de línea (ajuste de texto) dentro de la fuente.
Pre
Se conservan las secuencias de espacios en blanco. Las líneas solo se rompen en caracteres de nueva línea en el origen y en elementos
<br>.Pre-wrap
Se conservan las secuencias de espacios en blanco. Alinear se rompen en caracteres de nueva línea, en
<br>, y según sea necesario para rellenar casillas de línea.Pre-línea
Las secuencias de espacios en blanco se contraen. Las líneas se rompen en caracteres de nueva línea, en
<br>, y según sea necesario para llenar casillas de línea.
Fuente: https://developer.mozilla.org/en/docs/Web/CSS/white-space
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-27 22:17:53
¿Qué pasa con:
<pre>{{text}}</pre>
O para html:
<pre [innerHtml]="text"></pre>
A menudo uso el elemento HTML pre que representa texto preformateado.
Otro truco que uso a menudo para formatear Json es:
<pre>{{jsonString | json}}</pre>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-16 10:13:23
<p *ngFor="let myContent of myContents.split('\n')">{{ myContent }} </p>
Esta cosa hará lo mismo....
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-10 11:52:43
Aquí está mi opinión, usando un tubo simple
Crea un archivo llamado nl2pbr.pipe (lo que significa: new line a p / br) y ponerlo dentro de pipes carpeta, y este es su contenido:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'nl2pbr'
})
export class Nl2pbrPipe implements PipeTransform {
transform(value: any, args?: any): any {
// return value.replace(/\n/g, '<br />');
value = value.replace(/(?:\r\n\r\n|\r\r|\n\n)/g, '</p><p>');
return '<p>' + value.replace(/(?:\r\n|\r|\n)/g, '<br>') + '</p>';
}
/****************************
* example useage
* <div [innerHTML]="'testi\n\nng \n t/n/nest\n\b\ning' | translate | nl2pbr"></div>
****************************/
}
Asegúrese de agregar la tubería a la aplicación.módulo:
import { Nl2pbrPipe } from './pipes/`nl2pbr.pipe`';
Y Nl2pbrPipe al declarations: []
Ejemplo de uso:
<div [innerHTML]="'hello\n\n this is a new paragraph\n and a new line' | translate | nl2pbr"></div>
Producirá:
<p>hello</p>
<p>this is a new paragraph <br/> and a new line</p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-09 11:19:03