角度6，如何配置CSS设置以在所有组件上创建持久的背景色？

Question

I'm trying to create a background color that will persist on all of the components in my Angular app . 我正在尝试创建一种背景色，该背景色将保留在Angular应用程序的所有组件中 。

When I target html background: blue in the styles.css (global style sheet) this works if I change the encapsulation on the app.component.ts to ViewEncapsulation.Native , however it covers every component in the app. 当我在styles.css （全局样式表） styles.css定位html background: blue ，如果我将app.component.ts上的封装更改为ViewEncapsulation.Native ，则此方法ViewEncapsulation.Native ，但是它覆盖了应用程序中的每个组件。 Meaning the color is on top of every other component. 意味着颜色位于所有其他组件的顶部。

I just want to set a background color that that will be behind all components in the app and persist . 我只想设置背景色，该背景色将位于应用程序中所有组件的后面并保持不变 。

Answer 1

I had the same problem and fixed with this. 我有同样的问题，并已解决。 I do not know if is the best approach, try to put into the body tag in index.html : 我不知道是否是最好的方法，请尝试将它放入index.html的body标签中：

<body class=".." style="background:#E8EBEE;">

Answer 2

Go to your Style.css or Style.scss file and add this code: 转到您的Style.css或Style.scss文件，并添加以下代码：

  body { background: #EEE //Your Background Color that will be shown between all components even if the component fails to load. }

Import Renderer2 as follow: 导入Renderer2，如下所示：

 import { Component, OnInit, Renderer2 } from '@angular/core';

And If you want to add a custom background when a component being use, you will have to go to your component.ts File and add this code to the constructor: 而且，如果要在使用组件时添加自定义背景，则必须转到component.ts文件，并将此代码添加到构造函数中：
```
 constructor(private renderer: Renderer2) { this.renderer.setStyle(document.body, 'background', '#FFF'); } 
```

That code will apply a background color to the body only when this component is loaded. 该代码仅在加载此组件时才将背景颜色应用于主体。

角度6，如何配置CSS设置以在所有组件上创建持久的背景色？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-10-04 12:19:19

解决方案2
0 2018-10-04 13:24:07

角度6，如何配置CSS设置以在所有组件上创建持久的背景色？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-10-04 12:19:19

解决方案2 0 2018-10-04 13:24:07

解决方案1
1 已采纳 2018-10-04 12:19:19

解决方案2
0 2018-10-04 13:24:07