Question

我很惊讶Angular删除了彼此相邻的内联HTML标签之间的空格。

<p><span>1</span> <span>2</span> <span>3</span></p>

此代码将呈现为"123"而不是"1 2 3"。

此行为正确吗？

https://stackblitz.com/edit/angular-remove-spaces

Answer 1

如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。

Answer 2

我不知道为什么有人会建议通过CSS修复它。 Angular去除空格太过激进，需要更好的上下文意识。

在块的中间使用可以完全按预期工作，而不会删除空格。但是，如果它恰好位于同一段落中的另一个内联标签（例如或）旁边，则即使两者之间的空格也将被删除内联元素两侧是否有未包装的文本。

要为项目启用空白保留，假设您正在使用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）

Answer 3

该行为是正确的，因为您的空格在html元素之外，并且不会被呈现。尝试将它们放在跨度内：

1 2 3 

Answer 4

通常最好的做法是将所有与样式相关的功能都留给CSS。如果要在数字之间留一些间距，请尝试使用padding或margin和display: inline-block或display: flex。

HTML的工作仅仅是包含标记，而且正如您的问题所揭示的那样，并非总是100％清楚HTML将会发生什么。例如，也许将来您的代码可能会通过类似于preserveWhitespaces的方式进行修改，但是除了不影响标签外部的空白，它还可以使标签内部的空白最小化。

这只是理论上的情况，但需要考虑。

同样，我强烈建议使用CSS解决分隔数字的任务。

Answer 5

通过Angular 6以获得更好的性能Angular团队将preserveWhitespaces关闭为false。
因此，如果您需要手动启用它，则可以全局或按组件进行。

保留为真，否则为false以删除可能多余的空白编译模板中的字符。空格字符是那些与JavaScript正则表达式中的\ s字符类匹配。除非在编译器选项中覆盖，否则默认为false。

有关其他详细信息，请参见接下来的2个链接：
https://angular.io/api/core/Component#preservewhitespaces

How to globally set the preserveWhitespaces option in Angular to false?

为什么Angular删除内联标签之间的空格？

5 个答案: