Angular 8过滤器：保留文本区域输入的换行符

Posted 2023-02-27

【中文标题】Angular 8过滤器：保留文本区域输入的换行符

【英文标题】：Angular 8 filter : preserve line breaks on text area input

【发布时间】：2020-03-15 21:56:17

【问题描述】：

我尝试使用 angular 8 制作一个过滤器，以在我的文本区域输入中保留文本换行符，文本输入将放置在图像上方：

<div class="form-group col-10">
          <span class="badge badge-theme mb-3">Message personnalisé</span>
          <textarea class="form-control" id="exampleFormControlTextarea1" formControlName="personalizedMessage"
            rows="6"></textarea>

        </div>
<div class="col-6" style="margin-top: 35px;">
      <div class="row">
        <div class="col-12 card-container">
          <img src=displayedImage >
          <div class="message">
            <p ng-bind-html="personalizedMessage | linebreaks">giftCardForm.controls['personalizedMessage'].value</p>
          </div>
        </div>
      </div>
    </div>

管道

import  Pipe, PipeTransform  from '@angular/core';

@Pipe(
  name: 'linebreaks'
)
export class LinebreaksPipe implements PipeTransform 

  transform(text: any): any 
    return text.replace(/\n/g, "<br>");
  

我是 angular 新手，我不确定管道是否写得好！有人可以帮忙吗！

【问题讨论】：

感谢@SaurabhYadav，这不起作用

检查工作演示

祝你好运，我正在尝试做同样的事情，但下面的演示不起作用

【参考方案1】：

带有反应式表单的Angular的工作示例，如果您想使用模板驱动表单，请使用formControlName="message" ---> [(ngModel)]="message"

有一个 textarea 用于放置输入

示例

 <textarea placeholder="Message" formControlName="message" rows="3"></textarea>

显示位置

<div class="message" [innerHTML]="message">

为容器设置样式

.message white-space: pre-wrap;

【讨论】：

这是（对我来说）最简单的答案并且效果很好。您不必使用反应式表单，它与 PrimeNG p-textarea 配合得很好，也可以在 p-scrollPanel 中显示输出 - 这是一个简单的 css 解决方案。请记住，回车和换行符确实存在（即使您看不到它们），并且通过告诉显示组件文本已预先格式化，您可以按预期看到它们。

我喜欢这个答案，因为它对我有用。我正在使用带有 PrimeNG 版本 11 的 Angular 11。答案刚刚奏效！

【参考方案2】：

Working Demo

在管道中试试这个：

 export class LinebreaksPipe implements PipeTransform 

      transform(value: string): string 
        return value.replace(/\\n/g, '<br />');
      
    

在模板文件中：

<p [innerHTML]="profileForm.get('personalizedMessage').value | linebreaks">