Angular Elements создает HTML все в одну строку - PullRequest
Новая
       9

Angular Elements создает HTML все в одну строку

0 голосов
/ 26 октября 2018

Это очень раздражает. Как многие из вас, вероятно, знают, в есть «ошибка» с браузерами, которая обрабатывает элементы inline-block довольно странно. Если вы поместите два элемента inline-block рядом друг с другом, они будут иметь невидимое поле, как вы можете видеть здесь: http://jsfiddle.net/8o50engu/

Однако, если бы они были на одной линии, странное пространство исчезло бы: http://jsfiddle.net/8o50engu/1/

Если я создаю приложение Angular Elements (см. Файл app.module.ts в ссылке на StackBlitz ниже), мой HTML из моего компонента будет находиться в одной строке. Это означает, что HTML-код, который я пишу, отличается от выходного. Вы можете увидеть пример здесь: https://stackblitz.com/edit/angular-fowosb?file=src%2Fapp%2Fapp.component.html

Как видите, мои элементы четко разделены: 

<div>
  <span>
    span#1
  </span>
  <span>
    span#2
  </span>
</div>

Однако вывод находится в одной строке:

image

Это нормально работает в обычном угловом приложении (не угловые элементы), поэтому очевидно, что это проблема с угловыми элементами.

Есть ли способ отключить это в Angular Elements? Это решает проблему, которую я объяснил в начале, но это не то, что я хочу. Я хочу, чтобы мой HTML выводился так, как я его написал.

1 Ответ

0 голосов
/ 26 октября 2018

Такое поведение рендеринга контролируется параметром preserveWhitespaces Component decorator.Пробелы будут сохранены в выводе HTML, если вы установите опцию на true, как показано ниже и как вы можете видеть в this stackblitz .По умолчанию preservedWhitespaces равно false. 

@Component({
  ...
  preserveWhitespaces: true
})
export class MyComponent {
}
...