Angular中如何让含<br>的字符串在段落实现多行换行？

嘿，我懂你碰到的这个麻烦——你把换行符替换成<br>标签后，页面却直接显示标签文本，而不是实际换行。这是因为Angular的默认插值绑定（{{}}）会自动转义HTML内容，把<和>转换成实体字符，所以浏览器就把<br>当成普通文本渲染了。

下面给你两个实用的解决办法：

方法1：使用[innerHTML]绑定HTML内容 #

Angular提供了[innerHTML]属性绑定，专门用来渲染HTML内容，不会转义标签。你只需要修改HTML里的绑定方式：

修改后的HTML代码（针对message和signature部分）：

<div class="description">
  <p [innerHTML]="previewEmailMessage.message"></p>
</div>
<div class="signature-wrap">
  <p [innerHTML]="previewEmailMessage.signature"></p>
</div>

注意：如果你的邮件内容来自用户输入，一定要确保内容是安全的，避免XSS攻击。如果是系统内部生成的内容，这个方法完全没问题。

方法2：用CSS保留原生换行（无需替换<br>） #

如果你不想处理HTML标签，也可以直接保留字符串里的换行符，通过CSS让浏览器解析换行。只需要给对应的段落添加white-space: pre-line;样式：

在你的CSS文件中添加：

.description p, .signature-wrap p {
  white-space: pre-line;
}

然后你可以去掉TypeScript里替换<br>的代码，让原始的换行符生效。这个方法更安全，因为不需要插入任何HTML，适合处理纯文本内容的换行需求。

为什么原来的方法不生效？ #

简单说，Angular的{{}}插值是为了安全显示纯文本，它会把所有HTML特殊字符转义成实体（比如<变成<），所以<br>标签就变成了普通文本，不会被浏览器解析成换行。

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