css - 使用 ViewEncapsulation 时，是否可以将 "skin"或 "theme"设置为带有 CSS 的 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(默认))，但您可以随意添加/删除它们。