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

Question

我试图制作一个角度为 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}} alt="">
          <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 的新手，我不确定管道是否写得好！有人可以帮忙吗！

Answer 1

工作演示

在管道中尝试这个：

 export class LinebreaksPipe implements PipeTransform {

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

在模板文件中：

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

Answer 2

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

1. 有一个放置输入的文本区域

例子

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

2. 你在哪里展示它

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

3. 样式容器

.message { white-space: pre-wrap;}