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

• 来源
• 应用程序
• 资产
• 环境
• index.html
  *样式.css

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

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

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访问它会更好。

一般来说，使用ElementRef会使您的应用更容易受到XSS攻击。有关详细信息，请参阅this official Angular doc。
此外，如果您使用的是多个具有自己的Shadow DOMs的组件，则如Andresson所建议的那样在styles.css文件中设置全局样式可能无法解决问题。
这里有一个更安全的问题解决方案，使用 * 查看封装 *。
在app.component.ts中将视图封装设置为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;
}

此更改将在全局范围内影响你的应用。单击此处了解有关详细信息。

我不知道为什么没有提到它，但是把它添加到全局css文件中可以很好地工作：

body { background-color: red !important; }

下面的解决方案是我遇到同样问题时遇到的另一种选择。为了让应用程序更好地适应不同的平台，我们可以使用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及其方法的更多详细信息，请访问：渲染图2_描述

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

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

你可以在一个div中设置全部内容，并为该div设置样式：

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

height：100vh将把height设置为你屏幕的全长，这样背景颜色就像设置整个html的背景一样，但只适用于那个页面。