如何为不同的 Angular 5 页面应用不同的（整页）背景？

Question

目前我正在使用 Angular 5 制作 SPA。

我想用背景（不仅仅是一个组件）填充整个屏幕，但我希望每个页面都有不同的背景，我该如何实现？

我已经在相关页面的 component.css 中尝试了这段代码（例如 home.component.css）：

body {
  background-color: aqua;
}

（以背景色为例）

使用这种方法，我以为我可以覆盖每个组件的主体背景，但它似乎不起作用，页面保持空白。

我很感激你能给我的任何帮助，在此先感谢。

Answer 1

我认为你的问题是当你添加

body {
  background-color: aqua;
}

对于您的组件 css，Angular 将其重写为类似

body[_ngcontent-c0] {
  background-color: yellow;
}

如果您检查，您可以在开发工具中看到它。因此，样式不会附着在身体上。您可以使用 Renderer2 更改每个组件的主体样式。例如：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {
  name = 'Home';

  constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');
  }
}

类似问题：Angular2 将类添加到主体标签
Angular 文档：https : //angular.io/api/core/Renderer2
希望这会有所帮助。