CSS Angular 6 中的间距问题

Question

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

我们想恢复按钮之间的空格等。我设法重现了以下问题。正如您在 Angular 5 的示例中看到的那样， angular app.

内部和外部按钮之间有空格

但是

Angular 6 删除了 angular 应用程序内按钮之间的间距。

有什么想法吗？

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

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

Answer 1

这是因为您在 Angular 5 示例中有 bootstrap。请查看您的依赖项的屏幕截图。 Bootstrap 在那里 :).

Screenshot of list of Dependencies

你只需要想想，当你添加 bootstrap 作为依赖时。

Answer 2

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

Answer 3

请使用这是您的文件

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

Answer 4

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

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

到tsconfig.app.json

并且确实也将它添加到 main.ts，方法是将它添加到 platformBrowserDynamic，如下所示：

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

之后：再次服务以加载新的更改

CSS spacing issues in Angular 6