Question

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

Answer 1

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

SRC
- 应用
- 资产
- 环境
- 的index.html
- 的 styles.css的

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

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对象而不违反任何角度约定。当然，您可以使用document直接访问window.document对象，但我认为最好通过ElementRef访问它。

Answer 3

通常来说，使用ElementRef可能会使您的应用更容易受到XSS攻击。有关更多信息，请参见this official Angular doc。

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

使用视图封装，这是解决您问题的更安全的方法。
在 app.component.ts 中将“视图封装”设置为“无”（不要忘记导入）：

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

不确定为什么不提及它，但是将其添加到全局css文件中可以很好地工作：

body { background-color: red !important; }

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

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

5 个答案: