将 \n 替换为 <br> 标签 angular 6答案

【问题标题】：Replace \n with <br> tag angular 6将 \n 替换为 <br> 标签 angular 6
【发布时间】：2018-05-14 09:46:37
【问题描述】：

我有一个带有 \n 作为反斜杠标签的 REST API，angular 6 可以用 <br> 标签替换这些吗？

这是我的代码：

{{x.deskripsi}}

我尝试使用this package，但我不知道如何将它与{{}} 标记内的绑定一起使用。我尝试使用

<p ng-bind-html="x.deskripsi | nl2br"></p>

但它不起作用。有什么帮助吗？
提前致谢。

【问题讨论】：

这是一个 AngularJS 1.x 包

标签： angular angular6

【解决方案1】：

您不需要图书馆。只需将标签的white-space 属性设置为pre-wrap（或使用默认应具有此样式的<pre> 标签）

document.querySelector('#formatted').innerText = 'Lorem\nIpsum';

#formatted {
  white-space: pre-wrap;
}

<div id="formatted"></div>
<div>Lorem\nIpsum</div>

【讨论】：

@SlimenTN 并不是所有的东西都是 JS，在做一个消耗资源的解决方案之前，总是尝试用 CSS 或 HTML 来解决它！
完全同意你的看法:)
太棒了！谢谢！
很好的答案，请注意字符串中的空格会被考虑

【解决方案2】：

您也可以使用管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
transform(value: string): string {
      return value.replace(/\n/g, '<br/>');
   }
}

管道必须包含在您的 @NgModule 声明中才能包含在应用程序中。要在模板中显示 HTML，您可以使用绑定 innerHTML。

<p [innerHTML]="x.deskripsi | replaceLineBreaks"></p>

【讨论】：

这适用于内部 html 我尝试使用此代码 <div [innerHTML]="'<strong>test html content</strong>\nnew line\nthird line' | ReplaceLineBreaks"></div> 它可以正常工作，但是当我尝试使用我的绑定数据不起作用时，我尝试使用 pure: false 仍然无法正常工作?
你在段落标签上绑定什么类型的数据
我认为段落标签本身不包含任何标签。请查看此链接：https://googleweblight.com/i?u=https://www.quackit.com/html/tags/html_p_tag.cfm&hl=en-IN.
不确定，但段落标签中不支持某些标签

【解决方案3】：

你可以使用它：

<td [innerHTML]="kalaItem.PlanNetworkSimZaminiName | safeHtml"></td>

safeHtml 管道=>

import { Pipe } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe {
    constructor(private sanitizer: DomSanitizer) {}

    transform(value: any, args?: any): any {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

【讨论】：