Angular 元素在一行中生成 HTML

Question

这非常烦人。你们中的许多人可能都知道，there is a "bug" with browsers, that treat inline-block elements kind of weird. If you place two inline-block elements next to each other, they will have an invisible margin, as you can see here: http://jsfiddle.net/8o50engu/

但是，如果他们在同一条线上，那么奇怪的space就会消失：http://jsfiddle.net/8o50engu/1/

如果我创建一个 Angular Elements 应用程序（请参阅下面 StackBlitz link 中的 app.module.ts 文件），我的组件中的 HTML 全部在一行中.这意味着我写的 HTML 与输出不同。你可以在这里看到一个例子：https://stackblitz.com/edit/angular-fowosb?file=src%2Fapp%2Fapp.component.html

如您所见，我的元素显然在不同的行上：

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

但是，输出在一行上：

这在常规 Angular 应用程序（不是 Angular Elements）中工作正常，所以很明显这是 Angular Elements 的问题。

有没有办法在 Angular 元素中禁用它？它解决了我一开始解释的问题，但这不是我想要的。我希望我的 HTML 像我写的那样输出。

Answer 1

渲染行为由 preserveWhitespaces Component decorator option. The white spaces will be preserved in the HTML output if you set the option to true, as shown below and as you can see in this stackblitz 控制。默认情况下，preservedWhitespaces 是 false.

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

Angular 元素在一行中生成 HTML

Angular Elements produces HTML all on one line

angular

angular6

angular-elements