javascript - Angular 6 中的 CSS 间距问题

Question

我们最近刚从 Angular 5 升级到 Angular 6，并注意到按钮/图标等之间没有间距。

我们想恢复按钮之间的空格等。 我设法重现了以下问题。 正如您在 Angular 5 的示例中所见，angular 应用程序内部和外部的按钮之间有空格。

但是

Angular 6 移除了 Angular 应用内按钮之间的间距。

有什么想法吗？

Angular 5 示例(我想要这种行为)

https://stackblitz.com/edit/angular-5-example-kyu8ud?file=index.html

Angular 6 示例(存在上述问题)

https://stackblitz.com/edit/angular-vyfwih?file=src%2Fapp%2Fapp.component.html

Answer 1

从 Angular 6 开始 preserveWhitespaces编译器选项设置为 false。这就是为什么你观察到这种行为。您可以在 tsconfig 文件中更改它:

"angularCompilerOptions": {
  "preserveWhitespaces": true
} 

本质上是两者之间的区别:

<button>Test1</button> <-- whitespace here
<button>Test2</button>

和

<button>Test1</button><button>Test2</button> <-- no whitespace

Here是没有空格的 Angular 5 示例，您会看到它现在与 Angular 6 版本相同。