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

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

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

1 2 3 

Answer 2

如Angulardocumentation中所述，编译器选项preserveWhitespaces默认为false。使用该设置，Angular 编译器会删除 span 元素之间的 space。要在不更改编译器选项的情况下保留 spaces，您可以使用 Angular 实体 &ngsp;，它在呈现的 HTML 中被 space 替换：

<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 3

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

HTML 的工作只是包含标记，正如您的问题所揭示的，并不总是 100% 清楚 HTML 会发生什么。例如，也许将来您的代码可能会被类似于 preserveWhitespaces 的东西修改，但它不会影响标记外部的空白，它也可能会最小化标记内部的空白。

这只是理论上的情况，但值得考虑。

我再次强烈建议使用 CSS 来解决数字间距问题。

Answer 4

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

True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the \s character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.

查看接下来的 2 个链接以了解更多详细信息：
https://angular.io/api/core/Component#preservewhitespaces

Answer 5

我不知道为什么有人会建议通过 CSS 解决这个问题。 Angular 删除白色 space 过于激进，需要更好的上下文感知。

在  块的中间使用  完全符合预期，没有删除白色 space。但是，如果它恰好紧挨着同一段落中的另一个内联标签，例如或，那么space之间这两个将被删除，即使内联元素的两边都有展开的文本。

要为项目启用白色space 保存，假设您使用的是 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));

第一个文件将在开发过程中保留白色space (ng serve)，第二个文件将在生产构建过程中保留白色space

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

Why Angular removes spaces between inline tags?

spaces

angular