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

Question

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

Answer 1

您可以从任何组件中执行此操作。例如：

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

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

Answer 2

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

• 源
  • 应用程序
  • 资产
  • 环境
  • index.html
  • styles.css

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

Answer 3

一般来说，使用 ElementRef 可能会使您的应用更容易受到 XSS 攻击。更多信息请参考this official Angular doc。

此外，正如 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;
}

此更改将在全球范围内影响您的应用。 Read more about it here.

Answer 4

以下解决方案是我在面临同样问题时遇到的另一种选择。为了让应用程序在不同平台上更具适应性，我们可以使用 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

Answer 5

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

body { background-color: red !important; }