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 add class to body tag
Angular文档：https://angular.io/api/core/Renderer2
希望这会有所帮助。

Answer 2

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

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页面应用不同的（整页）背景？

2 个答案: