Angular ng-content 正在丢失换行符。我怎样才能保持换行完好无损?
Angular ng-content is losing newlines. How can I keep newlines intact?
我有一个用于显示代码的 Angular 组件,它看起来像这样:
<pre><code>
<ng-content></ng-content>
</code></pre>
我按以下方式使用此组件:
<app-example-code>
<![CDATA[
test
xyz
]]>
</app-example-code>
这会产生 "test 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 而不是每次都添加,但我想只要它能工作我就很高兴了。
我不认为 Angular 是 'losing' 换行符。这就是 HTML 的工作原理。您可以在 css 中使用 white-space: pre
来保留换行符(和空格)。
更新:查看 Lazar Ljubenović 的回答,也许毕竟是 Angular。这只是关于模板中的空格,但是如果这个组件在另一个模板中使用,就会出现这种情况。
这里发生了两件事。
HTML
默认情况下,大多数元素会将白色space 折叠成单个space 字符。如果不是这种情况,请写类似
<p>
paragraph
</p>
开头和结尾会有相当多的白色space,尤其是在深层嵌套结构中。
要显示白色space,您可以使用CSS:
p { white-space: pre }
Angular
另一方面,从版本 6 开始,Angular 也 默认去除白色 space。您可以通过配置其元数据来更改每个组件的此选项:
@Component({
preserveWhitespaces: true,
})
还有一个选项 。
我有一个用于显示代码的 Angular 组件,它看起来像这样:
<pre><code>
<ng-content></ng-content>
</code></pre>
我按以下方式使用此组件:
<app-example-code>
<![CDATA[
test
xyz
]]>
</app-example-code>
这会产生 "test 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 而不是每次都添加,但我想只要它能工作我就很高兴了。
我不认为 Angular 是 'losing' 换行符。这就是 HTML 的工作原理。您可以在 css 中使用 white-space: pre
来保留换行符(和空格)。
更新:查看 Lazar Ljubenović 的回答,也许毕竟是 Angular。这只是关于模板中的空格,但是如果这个组件在另一个模板中使用,就会出现这种情况。
这里发生了两件事。
HTML
默认情况下,大多数元素会将白色space 折叠成单个space 字符。如果不是这种情况,请写类似
<p>
paragraph
</p>
开头和结尾会有相当多的白色space,尤其是在深层嵌套结构中。
要显示白色space,您可以使用CSS:
p { white-space: pre }
Angular
另一方面,从版本 6 开始,Angular 也 默认去除白色 space。您可以通过配置其元数据来更改每个组件的此选项:
@Component({
preserveWhitespaces: true,
})
还有一个选项