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

Question

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

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

非常感谢您的帮助。谢谢。

- Steve Doson

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>

等等。

- Vega

---

我已经尝试过这个。但是边距成为一个问题。这个div周围有一些白色空间。 - Steve Doson

在 style.css 文件中查看你的 body{}，你应该有 padding: something。 - Vega

styles.css 中没有填充。 - Steve Doson

Answer 2

import { ViewEncapsulation } from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None,

})

为了覆盖 styles.css 中的样式并为组件指定特定的样式，请在组件中添加 ViewEncapsulation as none，并导入正确的类，就可以实现。

- Vijay Chitra

Answer 3

您可以使用:host选择器在宿主组件的模板中应用样式，即当前组件的父组件。在您的组件CSS中，尝试使用以下代码：

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

- FAISAL

---

不起作用。我将其保留在 app.component.css 中，但那里不起作用，所以我将其保留在 dashboard.component.css 中，但那里也不起作用。无论 styles.css 中有什么都会发生优先。 - Steve Doson

为您的应用程序组件选择器添加一些类，并将其更改为主机。 - FAISAL

Answer 4

这是我的解决方案。

style.css

.login-page {
    height: 100%;
      background-repeat: no-repeat;
      background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));
}

login-home.component.ts

保持在OnInit和OnDestroy函数中关注。

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

@Component({
  selector: 'app-login-home',
  templateUrl: './login-home.component.html',
  styleUrls: ['./login-home.component.css']
})
export class LoginHomeComponent implements OnInit, OnDestroy {
  // Search the tags in the DOM
  bodyTag: HTMLBodyElement = document.getElementsByTagName('body')[0];
  htmlTag: HTMLElement = document.getElementsByTagName('html')[0];

  constructor() {

  }

  ngOnInit() {
    // add the css-style to the html and body tags
    this.bodyTag.classList.add('login-page');
    this.htmlTag.classList.add('login-page');
  }

  ngOnDestroy() {
    // remove the the body classes
    this.bodyTag.classList.remove('login-page');
    this.htmlTag.classList.remove('login-page');
  }

}

- Camilo Soto

---

这是一个三年前的帖子，我不知道它是否适用于Angular 10。 - Camilo Soto

2022年对我没用 - HamzaDevXX

Answer 5

所以，我也遇到了这个问题，并找到了解决办法。

打开你的 `component.ts` 文件，在 `@component` 下面的 `styleUrls` 下方添加以下代码片段。

   /../
   styleUrls: ['./xyz.component.css'],
   styles:[
       `
        :host{
            display:block; //can be anything except inline(default display)
            background-color: white; //any background color you want
        }
       `
   ]

希望这对你也有效，它对我起了作用。

- Vishal