Angular 在渲染时删除了前导空格

Posted 2023-03-05

【中文标题】Angular 在渲染时删除了前导空格

【英文标题】：Angular removes leading whitespace when rendering

【发布时间】：2021-02-04 20:13:34

【问题描述】：

在工作中，我正在开发一个 Angular 组件，该组件在呈现的 html 页面上显示来自其输入的字符串。 显示字符串的 HTML 如下所示：

<span>value</span>

其中value 来自Angular 代码中的this.value。对于普通字符串，这可以正常工作，但我发现 Angular 会去掉前导空格。现在我知道，在将 HTML 渲染到可见页面时，HTML 本身会将多个空格压缩为一个，但空格会从 HTML 本身中删除。 我已验证 Angular 代码中的字符串包含空格：

console.log("The string is: [" + this.value + "]");

在 Web 控制台上打印出 The string is: [ Hello world!]。但是呈现的 HTML 页面上显示的是：

<span>Hello world!</span>

我该如何解决这个问题？

【问题讨论】：

this.value 中是否有前导空格？你想要空白还是不想要？ console.log 不像 Angular 那样做任何处理。

也许添加一个  一开始？

有帮助吗？

angular.io/api/core/Component#preserveWhitespaces

【参考方案1】：

其中一个选项是使用像 const value = ' Hello World!' 这样的不间断空格

【讨论】：

Angular 会去除 html 标签，因为它会在渲染前清理值。 ***.com/questions/49013217/…

【参考方案2】：

即使 Angular 保留了我认为它正在做的空白，html 也会将其删除。您有两种选择，要么使用标签，要么通过 css 进行，如下所示：

No Preservation <br/>
<span> Hello world! </span><br/>
<span>   Hello world!  </span>


<br/>
With Pre tag

<pre>
  <span> Hello World!   </span>
</pre>

<br/>
With Css white-space: pre<br/>
<span style="white-space: pre;">
    Hello World!   </span>