html - Angular 8 过滤器 : preserve line breaks on text area input

Question

我尝试使用 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}} 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

Angular 的工作示例，带有 react 形式 , 如果你想使用 模板驱动表单 , 使用代替 formControlName="message" ---> [(ngModel)]="message"

有一个 文本区域输入

的位置

示例

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

在哪里展示

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

使用

为容器设计样式
.message { white-space: pre-wrap;}