Angular2 - [innerHTML] && pipe(把字符串里的 /n 替换成 ＜br/＞)

需求

把接口返回的使用说明字符串innerHTML出来；

本来想直接  [innerHTML] 就可以了，但是事不遂人愿，那就写个pipe过滤一下；

过程

// 接口返回字符串：

// "couponRule": "使用说明：\n 1. 每人限领1张，仅限到店使用\n2. 到店时请向服务顾问出示优惠券用于核销；\n3. 优惠体验需一次性完成，请在有效期内使用，逾期失效。\n*优惠券领取时需填写手机号获取验证码，领取完成后请到我的-个人中心-我的钱包确认是否领取成功。"



 // 3种情况

<p>{{couponValid.couponRule}}</p>


<p [innerHTML]="couponValid?.couponRule |zConvertText | safeHtml"></p>


<p [innerHTML]="couponValid?.couponRule |hDataBr |zConvertText | safeHtml"></p>

结果：

 

过滤器

/**
 * Created by Echo_hx on 2021/05.
 * 把字符串里的 /n 替换成 <br/>
 */
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'hDataBr'})
export class DataBrPipe implements PipeTransform {
  transform(value: any) {
    return value.replace(/\n/g,'<br/>');
  }

}