Angular 6 中的 CSS 间距问题答案

【问题标题】：CSS spacing issues in Angular 6Angular 6 中的 CSS 间距问题
【发布时间】：2018-12-12 19:31:01
【问题描述】：

我们刚刚从 Angular 5 升级到 Angular 6，发现按钮/图标等之间没有间距。

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

但是

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

有什么想法吗？

Angular 5 示例（我想要这种行为）

Angular 6 示例（存在上述问题）

【问题讨论】：

【解决方案1】：

它终于奏效了（结合这篇文章中的答案）并通过添加恢复了我的空白）：

,
"angularCompilerOptions": {
  "preserveWhitespaces": true
}

到 tsconfig.app.json

实际上也将其添加到 main.ts，方法是将其添加到 platformBrowserDynamic，如下所示：

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true})

之后：ng serve 再次加载新的更改

【讨论】：

【解决方案2】：

请使用这是您的文件

platformBrowserDynamic() .bootstrapModule(AppModule, { preserveWhitespaces: true})

【讨论】：

【解决方案3】：

从 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 版本相同。

【讨论】：

【解决方案4】：

这是因为您在 Angular 5 示例中有引导程序。请查看您的依赖项的屏幕截图。引导程序就在那里:)。

您只需要考虑，当您将引导程序添加为依赖项时。

【讨论】：