为什么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

如Angular 文档中所述，默认情况下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>

有关演示，请参见此堆叠闪电战。