Угловой нг-контент теряет новые строки. Как я могу сохранить новые строки без изменений?

У меня есть угловой компонент, созданный для отображения кода, который выглядит следующим образом:

<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 сохранить эти разрывы строк?

РЕДАКТИРОВАТЬ: Делая то, что предложил комментатор, я получил его для работы с использованием

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

Я бы предпочел иметь возможность использовать app-example-code без добавления каждый раз, но я думаю, что я счастлив, пока он работает.

Источник

2 ответа

Решение

Здесь происходят две вещи.

HTML

По умолчанию большинство элементов свертывают пробелы в один символ пробела. Если это не так, пишите что-то вроде

<p>
  paragraph
</p>

было бы немного пробела в начале и в конце, особенно если он находится внутри глубоко вложенной структуры.

Для отображения пробелов вы можете использовать CSS:

p { white-space: pre }

угловатый

С другой стороны, начиная с версии 6, Angular также удаляет пробелы по умолчанию. Вы можете изменить эту опцию для каждого компонента, настроив его метаданные:

@Component({
  preserveWhitespace: true,
})

Также есть возможность сделать это глобально.

Источник

Я не думаю, что Angular "теряет" разрывы строк. Вот как работает HTML. Ты можешь использовать white-space: pre в вашем CSS, чтобы сохранить разрывы строк (и пробелы).

Обновление: проверьте ответ Лазаря Любеновича, возможно, это все-таки Angular. Это касается только пробелов в шаблоне, но если этот компонент используется в чужом шаблоне, это будет иметь место.

Источник
Другие вопросы по тегам