Angular Elements在一行上全部生成HTML

Question

这非常烦人。众所周知，there is a "bug"对于浏览器来说，将内联块元素视为一种怪异的方式。如果将两个内联块元素彼此相邻放置，则它们将具有不可见的边距，如您在此处看到的：http://jsfiddle.net/8o50engu/

但是，如果它们在同一行上，那么奇怪的空间就会消失：http://jsfiddle.net/8o50engu/1/

如果我创建了Angular Elements应用程序（请参见下面的StackBlitz链接中的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 Elements中禁用此功能？它解决了我一开始就解释的问题，但这不是我想要的。我希望我的HTML在编写时能够输出。

Answer 1

该渲染行为由preserveWhitespaces组件装饰器选项控制。如果将选项设置为true，则空格将保留在HTML输出中，如下所示，在this stackblitz中也可以看到。默认情况下，preservedWhitespaces是false。

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