0

这非常烦人。你们中的许多人可能都知道，浏览器有一个“错误”，它对待内联块元素有点奇怪。如果您将两个 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>

但是，输出在一行上：

这在常规的 Angular 应用程序（不是 Angular Elements）中运行良好，所以很明显这是 Angular Elements 的问题。

有没有办法在 Angular Elements 中禁用它？它解决了我在开始时解释的问题，但这不是我想要的。我希望我的 HTML 在我编写时输出。

4

1 回答 1

2

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

@Component({
  ...
  preserveWhitespaces: true
})
export class MyComponent {
}
于 2018-10-26T13:34:51.603 回答