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

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

0 голосов
/ 27 сентября 2018

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

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

Я использую этот компонент следующим образом: 

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

Что дает "тест XYZ".При использовании 

<pre><code>
test
xyz

я получаю ожидаемый разрыв строки.

Таким образом, очевидно, что ng-content теряет разрыв строки.Есть ли способ заставить ng-content сохранить эти разрывы строк?

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

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

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

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

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

HTML

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

<p>
  paragraph
</p>

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

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

p { white-space: pre }

Angular

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

@Component({
  preserveWhitespace: true,
})

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

0 голосов
/ 27 сентября 2018

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

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

...