如何在Angular 2中基于组件有条件添加样式表？

我有一个组件styleUrls。如何在Angular 2中基于组件有条件添加样式表？

默认情况下不显示此组件，因为我有一个*ngIf。

如果为true，则该组件将显示在具有CSS的页面中。 CSS会自动添加到文档<head>。

如果为false，则组件不再显示，但其CSS仍在页面中，位于<head>的内部。

当组件本身不显示时，如何从<head></head>中删除此CSS？

来源

2017-06-14 Steffi

您可以在您的index.html使用条件样式表使用*ngIf='YOUR_COMPONENT_ROUTE_HERE === THIS_ROUTE'. Not sure if the stylesheet will load.

您可以设置条件CSS类是这样的：

<element NgStyle={condition? true: false} > </element>

例如：

<element NgStyle={isNew ? 'new' : 'default' } > </element>

让我知道你是否有任何进一步的问题..

来源

2017-06-14 15:38:43 Moshe

我想添加一些CSS以外我的c omponent，比如“body”或“html”，它们位于根组件之外。 – Steffi

我认为这里可能会有一个更优雅的解决方案，我只需要更多的信息来处理你真正想要完成的工作 – Moshe

是啊！我的根组件中有一个名为Popup的组件。 Popup组件的CSS不在加载页面，因为组件不显示。一旦显示弹出组件，CSS也是如此。但是当弹出不再显示时，CSS仍然存在。在CSS中，我有这样的属性，它改变（在根组件之外，在弹出组件之外）和#header（在根组件之外，但在弹出组件之外）的CSS。我怎样才能做到这一点，而无需通过ID获取元素访问DOM ......？谢谢 – Steffi

如何在Angular 2中基于组件有条件添加样式表？

回答

相关问题