Angular 默认压缩连续空白字符，导致HTML空格“消失”，实际是DOM渲染规则与模板预处理共同作用；推荐优先使用CSS的white-space属性（如pre-wrap）控制视觉空格，而非修改preserveWhitespaces编译选项。
HTML 中的空格为什么在 Angular 里“消失”了
Angular 模板编译后默认会压缩连续空白字符（包括空格、换行、制表符），这是由 preserveWhitespaces 编译选项控制的。你写了一串空格，浏览器实际只渲染一个，不是 Angular “吃掉”了空格，而是底层的 DOM 渲染规则 + Angular 的模板预处理共同作用的结果。
如何让 Angular 保留 HTML 模板里的空格
最直接的方式是在组件装饰器中显式启用空格保留：
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
preserveWhitespaces: true
})
注意：preserveWhitespaces: true 是组件级开关，不影响其他组件；设为 false（默认）时，所有连续空白都会被合并为单个空格。
- 全局开启需在
tsconfig.json中设置"angularCompilerOptions": { "preserveWhitespaces": true }，但不推荐——体积和性能有代价 - 仅对某段文本需要空格？优先用 CSS 方案（见下一条），更轻量可控
- 该选项不影响插值表达式中的空格，比如
{{ 'a' + ' ' + 'b' }}仍会输出两个空格（但浏览器渲染时仍可能合并）
CSS 的 white-space 是更安全的空格控制方式
多数场景下，你真正需要的不是“保留模板空格”，而是“让文本按预期换行/留空”。这时候用 CSS 更可靠：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre：完全保留空格和换行，类似标签行为 white-space: pre-wrap：保留空格和换行，但允许自动换行（推荐日常使用）white-space: pre-line：合并多余空格，但保留换行符
示例：
hello world
.keep-spaces {
white-space: pre-wrap;
}
这样即使模板被压缩，只要样式生效，空格视觉效果就稳定。
用 或 Unicode 空格要谨慎
手动插入 看似简单，但在 Angular 中容易出问题：
- 插值中写
{{ 'a b' }}不会转义，直接输出字符串字面量，不会变成非断空格 - 模板中写
a b可以，但可读性差、维护成本高 - 用 Unicode 字符如
\u00A0（ - 动态拼接空格时，
'a' + '\u00A0\u00A0' + 'b'才能生效，普通空格' '仍会被合并
这类方式适合极少数必须硬编码空格的场景，比如生成固定格式日志或导出文本，而不是常规 UI 布局。
空格问题本质是 HTML 渲染规范与框架模板策略的交界点。别一上来就改 preserveWhitespaces，先确认你到底要的是“源码空格可见”，还是“视觉上留空”。后者用 white-space 几乎总比动编译配置更稳。
