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

How to change whole page background-color in Angular

提问by Efim Rozovsky

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.

我正在尝试更改 Angular 中整个页面的背景颜色（在没有框架的情况下工作时将使用 body 或 html 标签）。我找不到最佳实践，如果可能的话，我希望它在框架内，因为我将在未来几年构建应用程序。

回答by Andresson

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

如果您使用的是 angular-cli。
应该存在一个全局样式文件。

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

• 源文件
  • 应用程序
  • 资产
  • 环境
  • 索引.html
  • 样式文件

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

在那里你应该能够把你的风格，例如html { background-color: black; }影响整个页面。

回答by asmmahmud

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.documentobject without violating any angular convention. Of course, you can directly access the documentobject using window.documentbut, I think it would be better to access it through ElementRef.

通过使用this.elementRef.nativeElement.ownerDocument，您可以在window.document不违反任何角度约定的情况下访问对象。当然，您可以使用直接访问document对象，window.document但是，我认为通过ElementRef.

回答by vovdev

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

一般来说，使用 ElementRef 会使您的应用更容易受到 XSS 攻击。有关更多信息，请参阅此官方 Angular 文档。

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.

此外，如 Andresson 所建议的那样，在你的 style.css 文件中设置一个全局样式可能无法解决你的问题，如果你正在使用多个具有自己Shadow DOM 的组件。

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:

这是使用View Encapsulation解决您的问题的更安全的解决方案。
在app.component.ts 中将View Encapsulation 设置为 None（不要忘记导入）：

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.cssfile and simply add your background color:

接下来，转到您的app.component.css文件并简单地添加您的背景颜色：

body {
  background-color: green;
}

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

此更改将在全球范围内影响您的应用。在此处阅读更多相关信息。

回答by Sree

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 Renderer2class provided by Angular as a service like this:

以下解决方案是我遇到相同问题时遇到的另一种选择。为了使应用程序在不同平台上更具适应性，我们可以使用Renderer2Angular 提供的类作为服务，如下所示：

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

可以在此处找到有关 Renderer2 及其方法的更多详细信息：Render2_Description

回答by Rick

not sure why it's not mentioned, but adding this to the global css file works perfectly:

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

body { background-color: red !important; }