Почему Angular удаляет пробелы между встроенными тегами?

Question

Меня удивило, что Angular удаляет пробелы между встроенными тегами HTML, следующих друг за другом.

<p><span>1</span> <span>2</span> <span>3</span></p>

Этот код будет отображаться как "123" вместо "1 2 3".

Правильно ли это поведение?

https://stackblitz.com/edit/angular-remove-spaces

Answer 1

Как указано в документации Angular , опция компилятора preserveWhitespaces по умолчанию false.С этой настройкой угловой компилятор удаляет пробелы между вашими span элементами.Чтобы сохранить пробелы без изменения параметра компилятора, вы можете использовать угловую сущность &ngsp;, которая заменяется пробелом в отображаемом HTML:

<p><span>1</span>&ngsp;<span>2</span>&ngsp;<span>3</span></p>

Альтернативный метод - установить атрибут ngPreserveWhitespaces:

<p ngPreserveWhitespaces><span>1</span> <span>2</span> <span>3</span></p>

См. этот стек для демонстрации.

Answer 2

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

True для сохранения или false для удаления потенциально лишних пробелов символы из скомпилированного шаблона. Пробельные символы - это те, сопоставление класса символов \ s в регулярных выражениях JavaScript. Значение по умолчанию - false, если оно не переопределено в параметрах компилятора.

См. Следующие 2 ссылки для получения дополнительной информации:
https://angular.io/api/core/Component#preservewhitespaces

Как глобально установить для параметра preserveWhitespaces в Angular значение false?

Answer 3

Как правило, рекомендуется оставить все функции, связанные со стилем, CSS.Если вы хотите некоторый интервал между числами, попробуйте использовать padding или margin и display: inline-block или display: flex.

Работа HTMLs должна содержать только разметку, и, как показывает ваша проблема, это не всегдаНа 100% ясно, что будет с HTML.Например, в будущем ваш код может быть изменен чем-то похожим на preserveWhitespaces, но вместо того, чтобы воздействовать на пробелы вне тега, он может минимизировать также пробелы внутри тега.

Это просто теоретическийСитуация, но ее важно учитывать.

Опять же, я настоятельно рекомендую решить задачу разбить ваши числа с помощью CSS.

Answer 4

Поведение является правильным, потому что ваши пробелы находятся за пределами элементов HTML и не будут отображаться. Попробуйте поместить их в промежутки:

<p><span>1 </span><span>2 </span><span>3 </span></p>