custom - Angular2 Pipes: salida de HTML sin procesar

filter pipe angular 4

Question

Intento crear una tubería personalizada Angular2 que emita html sin formato. Quiero que simplemente convierta líneas nuevas en la entrada en saltos de línea HTML. ¿Cómo envío HTML sin formato desde un tubo angular2?

La siguiente es mi definición de canal 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 tener una cantidad de vistas y actividad en la que estoy dejando mi respuesta aceptada tal como está, a pesar de que para mi ejemplo específico, el uso del caso css probablemente habría sido una mejor opción y de hecho fue a lo que cambié Pero mi verdadera pregunta fue "¿cómo puedo sacar html crudo de un tubo angular 2?", No "cuál es la mejor manera de hacer saltos de línea", que es lo que muestra la respuesta aceptada.

Sin embargo, tenga en cuenta que, 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 las vulnerabilidades de XSS.

Answer 1

Aquí está mi opinión, usando un simple tubo

nl2pbr.pipe un archivo llamado nl2pbr.pipe (que significa: n ew l ine a p / br ) y ponlo dentro de la carpeta pipes , 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 app.module:

import { Nl2pbrPipe } from ''./pipes/`nl2pbr.pipe`'';

y Nl2pbrPipe a las declarations: []

Ejemplo de uso:

<div [innerHTML]="''hello/n/n this is a new paragraph/n and a new line'' | translate | nl2pbr"></div>

dará salida:

<p>hello</p>
<p>this is a new paragraph <br/> and a new line</p>

Answer 2

Como una variación de la respuesta de CSS anterior de Toolkit, si desea contar los espacios en blanco en lugar de colapsar, puede utilizar el siguiente código en su lugar.

HTML

<span class="line-breaker">
  {{text}}
</span>

CSS

.line-breaker {
  white-space: pre-wrap;
}

Lo que pre-wrap hace (además de mostrar saltos de línea y envoltura, 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 se colapsaron. Los caracteres de nueva línea en la fuente se manejan igual que otros espacios en blanco. Las líneas se rompen según sea necesario para llenar los cuadros de línea.

nowrap

Se contrae el espacio en blanco como normal, pero suprime los saltos de línea (ajuste del texto) dentro de la fuente.

pre

Secuencias de espacios en blanco se conservan. Las líneas solo se dividen en caracteres de nueva línea en la fuente y en los elementos.

envoltura previa

Secuencias de espacios en blanco se conservan. Las líneas se rompen en caracteres de nueva línea, en <br> y según sea necesario para llenar recuadros de línea.

prelinea

Las secuencias de espacios en blanco se colapsaron. Las líneas se rompen en caracteres de nueva línea, en <br> y según sea necesario para llenar recuadros de línea.

Fuente: https://developer.mozilla.org/en/docs/Web/CSS/white-space

Answer 3

La respuesta (la encontré justo después de publicar la pregunta) no es cambiar nada en la definición de la tubería, sino que se une a [innerHtml] cuando se usa la tubería.

Entonces reemplace esto:

<div class="panel-body">
    {{mycontent | newline}}
</div>

con este:

<div class="panel-body" [innerHtml]="myContent | newline">
</div>

Sería bueno si hubiera manera de hacer esto en la definición de la tubería, aunque ...

Answer 4

Qué pasa:

<pre>{{text}}</pre>

O para html:

<pre [innerHtml]="text"></pre>

A menudo utilizo el pre elemento HTML que representa texto preformateado.

Otro truco que a menudo uso para formatear a Json es:

<pre>{{jsonString | json}}</pre>

Answer 5

También puedes usar CSS puro

<span class="line-breaker">
{{text}}
</span>

.line-breaker {
  white-space: pre-line;
}

Answer 6

<p *ngFor="let myContent of myContents.split(''/n'')">{{ myContent }} </p>

Esto hará lo mismo ...