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

检查以上链接以获取更多信息

在angular2中实现主题

2 个答案: