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

Question

我想在Angular中改变整个页面的背景色（如果不使用框架，则会使用body或html标记）。我找不到最佳做法，如果可能的话，我希望它在框架内实现，因为我将要建立一个长期应用程序。

- Efim Rozovsky

---

如果您正在使用Angular CLI，您可以在styles.css中添加html和body标签。 - Z. Bagley

将以下代码放入“app.component.css”文件中：html { background-color: black; }不会产生任何效果。 - Efim Rozovsky

不要在app.component.css中设置样式，而是在style.css中设置。如果你在组件中设置了样式，那么应该使用类似于::ng-deep的东西。 - Vega

Answer 1

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

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

在那里，你可以放置你的样式，例如html { background-color: black; }以影响整个页面。

- Andresson

---

没注意到那个，谢谢，我会等asmmahmud的答案，然后再确认一个答案。 - Efim Rozovsky

这应该是被接受的答案。它更简单，并且似乎符合Angular制造者的意图。 - Andrew Lalis

这将无法改变特定组件的背景颜色。 - suhailvs

这对我没有用，背景是黑色的，但我的组件有白色的背景。我发现使用 body { background-color: black; } 对我有用。 - Juan Pablo

Bootstrap正在覆盖styles.css。 - sql_dummy

Answer 2

你可以从你的任何一个组件中实现这一点。例如：

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

通过使用this.elementRef.nativeElement.ownerDocument，您可以访问window.document对象，而不会违反任何Angular约定。当然，您可以直接使用window.document访问document对象，但我认为通过ElementRef访问更好。

- asmmahmud

---

抱歉，实际上你不能从 ngOnInit 生命周期钩子访问 dom。我已经更正了我的答案。 - asmmahmud

但是，@Anderson的回答并不是你所要求的。你要求的是最佳实践。我肯定可以给你那个解决方案，但我提到了一种解决方案，这也可能是最佳实践，因为这样你可以根据条件更改背景颜色。 - asmmahmud

如果您能给我一个点赞来鼓励我，那不是很棒吗？ - asmmahmud

你说得对，我不知道Anderson的回答是不好的实践，我是新手，不能点赞，但我同意你的观点。 - Efim Rozovsky

需要注意的是，一旦这个更改生效，它也将适用于任何其他页面，即使没有这个组件等。页面的背景颜色将始终设置为此值。 - QuietSeditionist

Answer 3

一般来说，使用ElementRef可能会使您的应用程序更容易受到XSS攻击。请参阅此官方Angular文档以获取更多信息。

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

这里是一个更安全的解决方案，使用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
})

接下来，进入你的app.component.css文件，然后只需添加背景颜色：

body {
  background-color: green;
}

此更改将全局影响您的应用程序。在此处阅读更多信息。

- vovdev

---

顺便提一句，如果我在某个页面中更改正文或HTML样式，我会发现这些更改也会影响其他页面。 有没有办法将更改限制仅适用于该特定页面？ - user7747472

为什么需要将ViewEncapsulation设置为None？我注意到如果不设置这个ViewEncapsulation，颜色就不会改变。（抱歉，我是Angular新手） - David Chopin

@DavidChopin 这样做是为了从 DOM 中移除封装。本质上，您可以覆盖已声明的 CSS 样式，否则将无法更改。 - Gideon Botha

Answer 4

不确定为什么没有被提及，但将这个添加到全局CSS文件中就可以完美地解决：

body { background-color: red !important; }

- Rick

---

你能解释一下 !important 是什么意思吗？因为这个方法对我来说很有效。 - joel

它只是强制CSS样式生效，即使其他CSS样式通常会阻止它。 - Rick

Bootstrap正在覆盖styles.css。 - sql_dummy

Answer 5

我在面对相同问题时，发现了另一种解决方案。为了使应用程序更适应不同的平台，我们可以像这样使用 Angular 提供的 Renderer2 类作为服务：

export class AppComponent {

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

  ngAfterViewInit(){

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

}

}

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

- Sree

---

推荐使用渲染器而不是直接访问。在此处阅读更多信息：https://medium.com/better-programming/angular-manipulate-properly-the-dom-with-renderer-16a756508cba - illnr

Answer 6

您可能还需要重新考虑字体颜色：

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

- Nusret Onur Ayduman

Answer 7

你可以将整个内容放在一个 div 中，并为该 div 设置样式：

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

height:100vh会将高度设置为屏幕的全长，这样背景颜色就会像为整个HTML设置背景一样应用于该页面。

- Darshan Naik