Angular ng-content正在失去换行符.如何保持换行符不变?

Question

我有一个用于显示代码的 Angular 组件，它看起来像这样：

<pre><code>
<ng-content></ng-content>
</code></pre>

我按以下方式使用此组件：

<app-example-code>
<![CDATA[
test
xyz
]]>
</app-example-code>

这会产生"测试 xyz"。使用时

<pre><code>
test
xyz
</code></pre>

我得到了预期的换行符。

所以显然ng-content似乎失去了换行符。有没有办法强制ng内容保留这些换行符？

编辑：按照评论者的建议去做，我让它使用

<app-example-code><pre>
<![CDATA[
test
xyz
]]>
</pre></app-example-code>

我本来希望能够在不每次添加的情况下使用应用程序示例代码，但我想只要它有效，我就很高兴。

Answer 1

这里正在发生两件事。

.HTML

默认情况下，大多数元素将空格折叠为单个空格字符。如果不是这种情况，写一些类似的东西

<p>
paragraph
</p>

在开头和结尾会有相当多的空格，特别是如果它位于深度嵌套结构中。

要显示空格，您可以使用CSS：

p { white-space: pre }

角

另一方面，从版本 6 开始，Angular默认情况下也会去除空格。您可以通过配置每个组件的元数据来更改每个组件的此选项：

@Component({
preserveWhitespaces: true,
})

还有一个选项可以在全球范围内进行。

Answer 2

我不认为是 Angular "丢失"了换行符。这就是 HTML 的工作方式。您可以在 css 中使用white-space: pre来保留换行符(和空格(。

更新：查看Lazar Ljubenović的答案，也许它毕竟是Angular。这只是关于模板中的空格，但如果在另一个模板中使用此组件，情况就会如此。