如何在 Angular 中更改整个页面的背景颜色

Question

I am trying to change the background color for the whole page in Angular(would use body, or html tag when working without framework). and I can't find the best practice for this, I want it to be within the framework if possible since I am building an application for years to come.

Answer 1

If you are using angular-cli.
There should exist a global style file.

• src
  • app
  • assets
  • environments
  • index.html
  • styles.css

In there you should be able to put your style eg html { background-color: black; } html { background-color: black; } to effect the whole page.

Answer 2

You can do this from any of your component. For example:

export class AppComponent implements AfterViewInit {
    constructor(private elementRef: ElementRef) {}
    ngAfterViewInit() {
        this.elementRef.nativeElement.ownerDocument
            .body.style.backgroundColor = 'yourColor';
    }
}

By using this.elementRef.nativeElement.ownerDocument , you can access the window.document object without violating any angular convention. Of course, you can directly access the document object using window.document but, I think it would be better to access it through ElementRef .

Answer 3

Generally speaking, using ElementRef could make your app more vulnerable to XSS attacks. Refer to this official Angular doc for more information.

Also, setting a global style in your styles.css file, as Andresson has suggested, might not solve your problem if you are working with multiple components which have their own Shadow DOMs .

Here's a safer solution to your problem, using View Encapsulation .
Set View Encapsulation to None (don't forget to import) in your app.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

Next, go to your app.component.css file and simply add your background color:

body {
  background-color: green;
}

This change will affect your app globally.Read more about it here .

Answer 4

不知道为什么没有提到它，但是将它添加到全局 css 文件中效果很好：

body { background-color: red !important; }

Answer 5

The following solution is another alternative that I came across while I was facing the same problem. For the application to be more adaptable on different platforms we can use Renderer2 class provided by Angular as a service like this:

export class AppComponent {

constructor(private el: ElementRef, private renderer:Renderer2){}

  ngAfterViewInit(){

this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', 'yourchoice color');

}

}

More details regarding Renderer2 and its methods can be found here: Render2_Description

Answer 6

You may also want to reconsider the font color:

body
{
  background-color: black !important;
  color:greenyellow;
}
h1
{
  color: aquamarine;

Answer 7

you can set whole content in one div and set style for that div:

<div  style=" background-color: black; height: 100vh;">

height:100vh will set height to full length of your screen so that the background color will be applied like setting background for whole html but just for that page.