Angular 2 如何单独更改每个组件的组件 <body> 背景颜色

【问题标题】：Angular 2 How to change component <body> background color for each component individuallyAngular 2 如何单独更改每个组件的组件 <body> 背景颜色
【发布时间】：2017-04-21 14:15:14
【问题描述】：

我有组件 A 和组件 B。

我希望组件 A 的背景颜色为黑色。

我希望组件 B 背景颜色为黄色。

如果我修改主 style.css 中的 bg 颜色，那么该颜色将在我的应用程序中全局设置。

如果我尝试修改组件 css 文件中的 bg 颜色，body bg 颜色不会受到影响。

有没有办法在加载时单独修改每个组件的背景颜色？

【问题讨论】：

当然。如果您的问题更具体一点，可能很容易提供答案。
这个问题是针对 Angular 2 的，没有太多要补充的，您有 2 个组件，我想在您更改组件时修改正文背景颜色。

标签： css angular

【解决方案1】：

@Component({... }) 
class MyComponent {   constructor() {
  this.bgColor = this.getRandomColor();   }

  @HostBinding('style.background-color')    
  bgColor;

  getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;   
  } 
}

感谢您因为问题标题不佳而对我的回答投了反对票

改为检查其他答案
- Style html,body from web component (Angular 2)
- Add class to body on Angular2
- Angular 2.x bind class on body tag
- ...

【讨论】：

请允许我测试一下，谢谢回答
但这是组件的background-color。不是 body 的 background-color。不是吗？ ?
如果你让组件 100% 的高度和宽度，它基本上是一样的。否则只需使用document.body.style ... = 'xxx'