使用ViewEncapsulation时，是否可以使用CSS“skin”或“theme”一个Angular2组件？

Question

我必须通过单击按钮使Angular2组件看起来完全不同（不仅仅是颜色）。所以非常喜欢不同的CSS“皮肤”或“主题”。如果稍后可以添加一些“皮肤”也会很好。

我知道我可以简单地设置ViewEncapsulation.None并使用像过去那样的可交换CSS文件。 但我想知道是否有可能使用ViewEncapsulation？

任何提示都表示赞赏！ 谢谢， 马库斯

Answer 1

您可以添加

@HostBinding('attr.theme') theme = this.globalService.theme;

到您的组件并根据类的值

制作样式

   :host([theme="dark"]) {
     color: lightgrey;
     background-color: black;
   }

   :host([theme="light"]) {
     color: black;
     background-color: white;
   }

您无法在运行时添加/删除组件样式。

如果您向index.html添加样式，则会丢失样式封装（使用ViewEncapsulation.Emulated（默认值）），但您可以随意添加/删除它们。