2

次のようなコードを表示するために作成された 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 を使用できるようにしたかったのですが、それが機能する限り、私は満足していると思います。

4

2 に答える 2

3

改行を「失っている」のはAngularではないと思います。これが HTML の仕組みです。css で使用white-space: preして、改行 (およびスペース) を保持できます。

更新: Lazar Ljubenović の回答を確認してください。結局のところ、Angular である可能性があります。これはテンプレート内の空白についてのみですが、このコンポーネントが別のテンプレートで使用されている場合はそうなります。

于 2018-09-27T09:30:49.113 に答える