如何在Angular2中更改不同组件的背景颜色？

Question

在Angular2应用程序中,我遇到了一个问题,即设置页面的背景颜色或图像.在应用程序中,如果我在styles.css中提到背景中的特定颜色,那么该颜色将应用于我开发的所有页面,因为它全局应用样式.现在如果我的登录页面是蓝色的,并且我想将我的主页的背景颜色更改为白色,我该如何去做呢？因为在组件主页中我们有:homepage.component.html和homepage.component.css.在homepage.component.css中,css仅影响主页的元素.我无法更改整个页面的颜色或添加图像作为整个页面的背景,因为它 body { ... }不会在那里工作.@import url也不起作用.

如何更改Angular2应用程序中不同组件的背景颜色？

任何帮助将不胜感激.谢谢.

Answer 1

另一种解决方案,有点基础,但有效:

style.css文件

 body, html {
   padding: 0;
   width: 100vw;
   height: 100vh;
 }

.my-container{
  width: 100vw;
  height: 100vh;
  ....
}

home.component.css

.my-container{
    background-color: red;
 }

home.component.html

<div class="my-container>
   ...
   /* the content of your component here */
</div

login.component.css

.my-container{
    background-color: blue;
 }

login.component.html

<div class="my-container>
   ...
   /* the content of your component here */
</div>

等等.

Answer 2

您可以使用:host选择器应用宿主组件\xe2\x80\x99s 模板（当前组件的父组件）中的样式。在组件的 css 中，尝试以下操作：

\n\n

:host .my-app-class {\n    background-color: white;\n}\n

\n