我很惊讶 Angular 删除了内联 HTML 标记之间的空格。
<p><span>1</span> <span>2</span> <span>3</span></p>
此代码将呈现为"123"，而不是"1 2 3"。
这种行为正确吗？
【问题讨论】：
该行为是正确的，因为您的空格在 html 元素之外并且不会被渲染。尝试将它们放在跨度内：
<p><span>1 </span><span>2 </span><span>3 </span></p>
【讨论】：
如 Angular documentation 中所述，编译器选项 preserveWhitespaces 默认为 false。使用该设置，Angular 编译器会删除 span 元素之间的空格。要在不更改编译器选项的情况下保留空格，您可以使用 Angular 实体 &ngsp; 替换为呈现的 HTML 中的空格：
<p><span>1</span>&ngsp;<span>2</span>&ngsp;<span>3</span></p>
另一种方法是设置ngPreserveWhitespaces 属性：
<p ngPreserveWhitespaces><span>1</span> <span>2</span> <span>3</span></p>
请参阅this stackblitz 以获取演示。
【讨论】：
ngPreserveWhitespaces。它正在工作，谢谢。至于HTML实体&ngsp;，你的意思可能是&nbsp;？
&ngsp;，如Angular documentation 和the stackblitz 所示。该实体由 Angular 定义并被编译器识别。它呈现为普通空间，而不是&nbsp;，后者是 HTML 牢不可破的空间。
ngsp 并没有在 Unicode 中找到它。谢谢你的解释。
将所有与样式相关的功能留给 CSS 通常是最佳做法。
如果您希望数字之间有一些间距，请尝试使用 padding 或 margin 和 display: inline-block 或 display: flex。
HTML 的工作只是包含标记，正如您的问题所揭示的那样，并不总是 100% 清楚 HTML 会发生什么。例如，将来您的代码可能会被类似于preserveWhitespaces 的东西修改，但它不会影响标签外的空白，它也可能会最小化标签内的空白。
这只是一种理论上的情况，但需要考虑。
我再次强烈建议使用 CSS 解决数字间距任务。
【讨论】：
通过 Angular 6 以获得更好的性能 Angular 团队将 preserveWhitespaces 关闭为 false。
因此，如果您需要手动打开它，您可以全局或按组件进行。
True 保留或 false 删除可能多余的空格 已编译模板中的字符。空白字符是那些 匹配 JavaScript 正则表达式中的 \s 字符类。 默认为 false，除非在编译器选项中被覆盖。
更多详情请参见接下来的 2 个链接：
https://angular.io/api/core/Component#preservewhitespaces
How to globally set the preserveWhitespaces option in Angular to false?
【讨论】：
我不知道为什么有人会建议通过 CSS 解决这个问题。 Angular 在删除空格方面过于激进，需要更好的上下文感知。
在<p> 块的中间使用<strong> 可以完全按照预期工作，不会删除空格。 然而，如果它恰好在同一段落中的另一个内联标签旁边，例如<span>或<em>，那么两者之间的空格将被删除，即使有展开内联元素两侧的文本。
要为项目启用空白保留，假设您使用 CLI，您需要更新项目中的两个文件（检查 src 目录）。
tsconfig.app.json
将此添加到文档末尾，在最后一个花括号之前：
"angularCompilerOptions": {
"preserveWhitespaces": true
}
main.ts
变化：
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
收件人：
platformBrowserDynamic().bootstrapModule(AppModule, {
preserveWhitespaces: true
}).catch(err => console.error(err));
第一个文件将在开发过程中保留空白 (ng serve)，第二个文件将在产品构建中执行相同的操作 (ng build --prod)
【讨论】：
"preserveWhitespaces": true 这样的优化会破坏行内间距这一事实真的很烦人。