在angular2中实现主题

Question

我正在尝试在Angular2项目中实现主题.

当有人更改网络应用程序的主题时,它将使用javascript更改正文类.应用程序中的每个组件都为每个主题提供相关颜色.

有人可以建议我如何在Angular2组件中执行此操作.

当我用我的组件样式表编写时

body.theme-1 .header {
   background-color: red;
}

它不起作用.

任何其他方式来实现这一点.

如果我从组件样式表中剪切相同的css并将其放入index.html或常见样式表中,则可以正常工作.但它是一个巨大的应用程序,我不想将所有组件样式写入一次.不可管理.

Answer 1

如果ViewEncapsulation.none在组件中声明,则该组件中的样式将全局应用于您的应用程序.

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

@Component({
  selector: 'style-test',
  template: `<div> Global stylesheet</div>`,
  styles: ['body {
                  background: blue;
                 }'],
  encapsulation: ViewEncapsulation.None // Use to 
                                       //disable CSS 
                                      //Encapsulation 
                                     //for this component
})
export class SecondComponent {
  constructor() { }
}

Answer 2

我从Angular2文档中找到了答案.

您可以使用:host-context()函数

:host-context(.theme-1) .header {
    background-color: red;
}

它就像一个魅力.

https://angular.io/docs/ts/latest/guide/component-styles.html

请查看以上链接以获取更多信息