Angular 新内容正在丢失换行符。我怎样才能保持新行的完整性？

我有一个用于显示代码的角度组件，如下所示：

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

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

我得到了预期的换行符

因此，ng内容似乎失去了换行符。有没有办法强制ng内容保留这些换行符

编辑：按照评论人的建议，我用

---

我本希望能够使用应用程序示例代码，而不必每次都添加代码，但我想只要它能工作，我会很高兴。

我不认为“丢失”换行符的原因是角度。这就是HTML的工作原理。您可以在css中使用

空白：pre

，以保留换行符（和空格）

---

更新：看看拉扎尔·卢贝诺维奇的答案，也许它毕竟是棱角分明的。这只是关于模板中的空白，但如果在其他模板中使用此组件，则会出现这种情况。

这里发生了两件事

HTML 默认情况下，大多数元素将空格折叠为单个空格字符。如果不是这样的话，写一些

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

---

还有一个选项。

最快的解决方案是将

标记嵌套在
中，在组件中添加该标记（pre和/或代码）不起作用。我不希望在我使用这个组件的每个地方都设置css设置。你应该能够将css添加到你的组件中，这样你就不必到处添加css了。话虽如此，请检查Lazar Ljubenović的答案，因为这表明Angular可能正在剥离您的空白。component属性实际上是
preserveWhitespaces
（末尾有一个s）。
<pre><code>
test
xyz
</code></pre>

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

<p>
  paragraph
</p>

p { white-space: pre }

@Component({
  preserveWhitespaces: true,
})