Angular2 Pipes:输出原始HTML

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

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

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

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>元素中的换行符处断行.

预包装

保留了空白的序列.线条在换行字符,at处<br>和必要时用于填充线框.

前行

空白的序列被折叠.线条在换行字符,at处<br>和必要时用于填充线框.

资料来源:https://developer.mozilla.org/en/docs/Web/CSS/white-space

Answer 4

如果您在 HTML 中绑定 Typescript 变量并且它包含“\n”，那么您需要替换它们<br/>，否则从头开始保留<br/>。

但是，字符串插值不会破坏您需要使用与innerHtml 进行属性绑定的行，例如：

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