如何在Angular视图中将换行符\n作为普通字符串显示

核心逻辑说明 #

你在JavaScript代码中书写的"\n"是换行控制符的转义表示，实际存储的是ASCII码为10的不可见换行控制符，并非\和n两个可见字符，Angular默认渲染时会合并连续空白字符，因此看不到该符号。你提到的<pre>标签、white-space: pre-line、[innerText]等方案都是用来保留换行控制符的换行效果，无法实现显示字面\n的需求，因此不适用。

实现方案 #

方案1：直接字符串替换（单次场景） #

赋值时主动将所有换行控制符替换为字面的\n字符串即可：

// 将换行控制符替换为反斜杠加n的可见字符组合
this.myText = "This is my \n example \n string: \n".replaceAll('\n', '\\n');

模板直接正常插值：

<div>{{ myText }}</div>

方案2：封装Angular纯管道（多场景复用） #

如果项目中多处需要该能力，可封装为可复用管道：

1. 新建escape-linebreak.pipe.ts文件：

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

@Pipe({
  name: 'escapeLinebreak',
  pure: true
})
export class EscapeLinebreakPipe implements PipeTransform {
  transform(value: string): string {
    return !value ? '' : value.replaceAll('\n', '\\n');
  }
}

2. 在对应NgModule的declarations数组中声明该管道后，直接在模板中调用：

<div>{{ myText | escapeLinebreak }}</div>

两种方案最终渲染输出均为："This is my \n example \n string: \n" #

内容的提问来源于stack exchange，提问作者Kyle