html - 如何为不同的 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;
}

如果你检查一下，你可以在开发工具中看到它。正因为如此，样式不会附着在 body 上。您可以使用 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 add class to body tag
Angular 文档:https://angular.io/api/core/Renderer2
希望这会有所帮助。