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

Question

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

我想用背景填充整个屏幕（不只是一个组件），但我想为每个页面设置不同的背景，我该如何实现？

我已经在相关页面的 component.css 中尝试过此代码（例如家。component.css):

body {
  background-color: aqua;
}

（以背景颜色为例）

用这个方法，我以为我可以覆盖每个组件的主体背景，但它似乎不起作用，页面仍然是空的。

如果您能给我任何帮助，我将不胜感激，在此先致谢。

Answer 1

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

body {
  background-color: aqua;
}

您的组件 css，Angular 将其重写为

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

如果你检查一下，你可以在开发工具中看到它。因此，样式不会附加到 body。您可以使用 Renderer2 更改每个组件的 body 样式。例如：

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
希望这有帮助。

Answer 2

在所有需要背景色的组件中添加如下组件。要使用的颜色可以在input属性中传入：

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

@Component({
  selector: 'app-bg',
  templateUrl: './bg.component.html',
  styleUrls: ['./bg.component.scss']
})
export class BgComponent implements OnInit {

  @Input() bgColor = 'red';

  constructor() { }

  ngOnInit() {

  }

  public getBgColor() {
    return {
      'background-color': this.bgColor
    };
  }
}

这里是 CSS bg.component.scss:

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    overflow: auto;
}

和模板bg.component.html：

<div class="bg" [ngStyle]="getBgColor()"></div>

最后在所有需要背景色的组件中，添加：

<app-bg [bgColor]="'blue'"></app-bg>

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

How can I apply different (full page) backgrounds for different Angular 5 pages?

html

css

single-page-application

angular

angular5