角ng内容正在丢失换行符。如何保持换行符完整？

Question

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

WebHost.CreateDefaultBuilder(args).UseUrls("http://0.0.0.0:5000")

我通过以下方式使用此组件：

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

哪个产生“ test xyz”。使用时

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

我得到了预期的换行符。

因此，显然ng-content似乎失去了换行符。有没有办法我可以强制ng-content保持这些换行符？

编辑：按照评论者的建议，我可以使用它

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

我希望能够使用app-example-code而不必每次都添加，但是我想我很高兴，只要它能工作。

Answer 1

我认为不是Angular在“丢失”换行符。 HTML是这样工作的。您可以在CSS中使用white-space: pre来保持换行符（和空格）。

更新：检查LazarLjubenović的答案，也许毕竟是Angular。那只是模板中的空白，但是如果在其他人的模板中使用了此组件，情况将会如此。

Answer 2

这里正在发生两件事。

HTML

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

<p>
  paragraph
</p>

在开始和结束时都会有很多空格，尤其是在深层嵌套的结构中发现的时候。

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

p { white-space: pre }

角度

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

@Component({
  preserveWhitespace: true,
})

还有do it globally的选项。