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

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

@Component({
  encapsulation: ViewEncapsulation.None,

})

要覆盖styles.css中的样式并为组件指定特定样式，请在组件中添加 ViewEncapsulation为空 ，然后导入正确的类。

Answer 3

您可以使用:host选择器在主机组件的模板中应用样式，该模板是当前组件的父模板。在组件的css中，试试这个：

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

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');
  }

}

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

4 个答案: