Angular2管道:输出原始HTML
我正在尝试创建一个输出原始html的Angular2自定义管道。我希望它能简单地将输入中的换行符转换为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可能是更好的选择，实际上我也是这样做的。但我的实际问题是“如何从angular 2管道输出原始html”，而不是“什么是渲染换行符的最佳方式”，这是公认的答案。
但是要注意，正如下面的评论中所提到的，如果您确实在接受的答案中使用了该方法，则需要确保不会呈现未经检查的用户输入，因为这可能会使您面临XSS漏洞。
回答 7
Stack Overflow用户
发布于 2016-03-15 06:24:44
答案(我在发布问题后不久发现)是不更改管道定义中的任何内容，而是在使用管道时绑定到innerHtml。
因此，请替换以下内容：
<div class="panel-body">
{{mycontent | newline}}
</div>有了这个：
<div class="panel-body" [innerHtml]="myContent | newline">
</div>不过，如果在管道定义中有这样的方法就好了……
编辑:由于这个答案似乎吸引了许多反对票，因此我将其保留为原样，尽管对于我的特定示例用例来说，css可能会是更好的选择，并且实际上也是我更改为使用的。
但我的实际问题是“如何从angular 2管道输出原始html”，而不是“渲染换行符的最佳方法是什么”。这个答案展示了如何做到这一点。
但是要注意，正如下面的评论中所提到的，如果您确实使用了此答案中的方法，则需要确保不会呈现未经检查的用户输入，因为这可能会使您面临XSS漏洞。
Stack Overflow用户
发布于 2017-02-04 19:15:34
您也可以使用纯CSS
<span class="line-breaker">
{{text}}
</span>
.line-breaker {
white-space: pre-line;
}Stack Overflow用户
发布于 2019-10-25 19:35:07
如果您在HTML中绑定Typescript变量，并且它包含'\n‘，那么您需要替换它们< br/>，否则请从头保留< br/>。
但是，字符串插值不会破坏您在innerHtml中使用属性绑定所需的功能，例如：
<span [innerHtml]="stringVariableName"></span>https://stackoverflow.com/questions/35999185
复制相似问题