Angular2 Трубы: вывод raw HTML

Я пытаюсь создать пользовательский канал Angular2, который выводит raw html. Я хочу, чтобы он просто преобразовал новые строки во входные данные в разрывы строк HTML. Как вывести необработанный HTML из Angular2 трубы?

Следующее - это определение текущего потока, но оно ускользает от HTML, который я не хочу:

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 />');
    }
}

РЕДАКТИРОВАТЬ: Просто быстрая заметка, так как этот вопрос, похоже, получает несколько видов и действий, которые я оставляю своим принятым ответом, как есть, хотя для моего конкретного примера css для использования, вероятно, был бы лучшим вариантом и на самом деле я изменился. Но мой фактический вопрос заключался в том, "как мне выводить raw html из angular 2 pipe", а не "лучший способ визуализации разрывов строк", что и показывает принятый ответ.

Остерегайтесь, хотя, как упоминалось в комментариях ниже, если вы используете метод в принятом ответе, вам нужно убедиться, что вы не выполняете неконтролируемый ввод пользователя, так как это может открыть вам уязвимости XSS.

Ответ 1

Ответ (я нашел сразу после публикации вопроса) состоит не в том, чтобы что-либо изменить в определении канала, а в том, чтобы связать его с [innerHtml] при использовании канала.

Так что замените это:

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

с этим:

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

Было бы хорошо, если бы был способ сделать это в определении канала, хотя...

РЕДАКТИРОВАТЬ: просто краткое примечание, так как этот ответ, кажется, привлекает ряд отрицательных голосов, которые я оставляю как есть, хотя для моего конкретного примера сценарий использования css, вероятно, был бы лучшим вариантом и фактически был тем, что я изменил на использовать.

НО мой фактический вопрос был "как вывести необработанный html из угловой трубы 2", а не "какой лучший способ визуализировать разрывы строк". Этот ответ показывает, как это сделать.

ОСТЕРЕГАЙТЕСЬ, хотя, как упоминалось в комментариях ниже, если вы используете метод в этом ответе, вам нужно убедиться, что вы не рендерили непроверенный пользовательский ввод, так как это может открыть вас для уязвимостей XSS.

Ответ 2

Вы также можете использовать чистый CSS

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

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

Ответ 3

Как вариант вышеприведенного CSS-ответа Toolkit, если вы хотите, чтобы пробел был подсчитан, а не свернут, вы можете использовать следующий код.

HTML

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

CSS

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

То, что делает pre-wrap (в дополнение к отображению разрывов строк и обертывания и т.д., Например, pre-line), показывает каждое пространство как пространство, а не сворачивает несколько пробелов в один.

нормальный

Последовательности пробелов рушится. Символы новой строки в источнике обрабатываются так же, как и другие пробелы. Строки разбиваются по мере необходимости, чтобы заполнить строки.

Nowrap

Сбрасывает пробелы, как для нормального, но подавляет разрывы строк (перенос текста) внутри источника.

до

Сохраняются последовательности пробелов. Строки разбиваются только на символы новой строки в источнике и в <br> элементов.

предварительно обертка

Сохраняются последовательности пробелов. Строки разбиваются на символы новой строки, в <br> и, если необходимо, заполнять линейные поля.

до линии

Последовательности пробелов рушится. Строки разбиваются на символы новой строки, в <br> и, если необходимо, заполнять линейные поля.

Источник: https://developer.mozilla.org/en/docs/Web/CSS/white-space

Ответ 4

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

Эта вещь будет делать то же самое....

Ответ 5

Здесь я беру его, используя простую трубу

создайте файл nl2pbr.pipe (который означает: n ew l ine to p/br) и поместил его в папку pipes, и это его содержимое:

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>
 ****************************/

}

Убедитесь, что вы добавили канал в app.module:

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

и Nl2pbrPipe к declarations: []

Пример использования:

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

выведет:

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

Ответ 6

Как насчет:

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

Или для html:

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

Я часто использую HTML-элемент pre, который представляет предварительно отформатированный текст.

Еще один трюк, который я часто использую для форматирования Json:

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

Ответ 7

использовать угловую директиву

import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[shareLineBreaker]',
})
export class LineBreakerDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style['white-space'] = 'pre-line'
    }
}

затем

<td shareLineBreaker>
                    {{data.users |  arraymap:'\n':'n':'l' }}
                </td>

Ответ 8

value.replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');

работает для меня