Angular ng-content 正在丢失换行符。如何保持换行符完好无损？

Posted 2023-03-13

【中文标题】Angular ng-content 正在丢失换行符。如何保持换行符完好无损？

【英文标题】：Angular ng-content is losing newlines. How can I keep newlines intact?

【发布时间】：2019-03-03 04:13:30

【问题描述】：

我有一个用于显示代码的 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-content 保留这些换行符？

编辑：按照评论者的建议，我得到了它的使用

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

我希望能够使用 app-example-code 而无需每次都添加，但我想只要它有效，我就很高兴。

【问题讨论】：

最快的解决方案是将<pre><code>标签嵌套在<ng-content>中

【参考方案1】：

这里发生了两件事。

html

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

<p>
  paragraph
</p>

在开始和结束时会有相当多的空白，尤其是在深度嵌套的结构中。

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

p  white-space: pre 

角度

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

@Component(
  preserveWhitespaces: true,
)

还有do it globally的选项。

【讨论】：

组件属性其实是preserveWhitespaces（末尾有s）。

【参考方案2】：

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

更新：检查 Lazar Ljubenović 的回答，也许它毕竟是 Angular。这只是关于模板中的空白，但如果这个组件用于另一个模板中就会出现这种情况。

【讨论】：

在组件内添加（pre 和/或代码）不起作用。而且我宁愿不必在使用此组件的每个地方都设置该 css 设置。

您应该能够将 css 添加到您的组件中，因此您不必到处添加它。话虽如此 - 检查 Lazar Ljubenović 的回答，因为这表明 Angular 正在剥离你的空白。