Question

我有一个Home组件，我有一个旋转木马组件。我想将家庭的背景颜色应用为灰色，将旋转木马的背景颜色应用为蓝色。

我无法将背景颜色应用于Home组件的body标签。

Answer 1

Angular 2完全是关于模块化的，因此它有目的地为组件中的所有样式添加一个css范围，以便父组件的样式不会渗透并影响子组件的外观。这就是为什么所有组件都具有如下所示的奇怪属性：_ngcontent-c0

如果您查看为您的组件生成的css，您还会注意到此标记已添加到您的所有样式中：h1[_ngcontent-c0]

所以你的Home和Carousel组件需要自己的风格：

@Component({
   selector: 'home',
   template: `<body>
                <carousel></carousel>
              </body>`,
   styles: ['body { background-color: gray; }']
}) 

@Component({
   selector: 'carousel',
   template: `<div id="carousel_body">
                 <!-- carousel stuff here -->
              </div>`,
   styles: ['#carousel_body{ background-color: blue; }']
})

您拥有的其他选择是：

通过将样式放在index.html以传统方式引用的css文件中使样式全局化
使用特殊选择器，例如：host或/ deep /来覆盖css作用域机制（/ deep /不推荐使用）
您可以在所有禁用css范围的组件上设置encapsulation: ViewEncapsulation.None，但在我看来，这会使角度很大的失败。

每个选项都以更长的长度here

Here's an example on plunkr

角度2的组件背景颜色

1 个答案: