这是我的看法，使用一个简单的管道

Question

我正在尝试创建一个输出原始html的Angular2自定义管道。我希望它只是将输入中的换行符转换为HTML换行符。如何从angular2管道输出原始HTML？

以下是我当前的管道定义，但它转义了我不想要的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可能是一个更好的选择，事实上我改变了。但我的实际问题是“如何从角度2管道输出原始html”，而不是“什么是渲染换行符的最佳方式”，这是接受的答案所显示的。

请注意，如下面的评论中所述，如果您在接受的答案中使用该方法，则需要确保您不会呈现未经检查的用户输入，因为这可能会导致您遇到XSS漏洞。

Answer 1

你也可以使用纯CSS

TASK_INTERRUPTIBLE

Answer 2

答案（我在发布问题后发现）不是要更改管道定义中的任何内容，而是在使用管道时绑定到[innerHtml]。

所以替换这个：

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

用这个：

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

如果在管道定义中有办法做到这一点会很好......

Answer 3

作为Toolkit的上述CSS答案的变体，如果您想要计算空格而不是折叠，则可以使用以下代码。

<强> 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

Answer 4

<a href="{{ url()->previous() }}"

这件事也会这样做....

Answer 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>

Answer 6

怎么样：

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

或者对于html：

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

我经常使用代表预先格式化文本的HTML pre元素。

我经常用来格式化Json的另一个技巧是：

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

Answer 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>

Answer 8

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

为我工作

Answer 9

如果要在HTML中绑定Typescript变量，并且该变量包含'\ n'，则需要替换它们
，否则请从头开始。

但是，字符串插值不会中断您需要对innerHtml使用属性绑定的行，例如：

<span [innerHtml]="stringVariableName"></span>

Angular2 Pipes：输出原始HTML

9 个答案:

正常

NOWRAP

预

预包装

预线

这是我的看法，使用一个简单的管道

用法示例：