根据条件/输入属性Angular 2 添加CSS样式URL

Question

我有一个组件，它在应用程序中的两个地方使用，一个用于列表，另一个用于滑块，唯一的区别是在CSS中，一个具有较大的视图，另一个具有较小的视图，有些其他CSS变化。

所以我想在两个地方使用相同的组件并使用不同的外部样式，但是为此，我需要动态地将CSS URL添加到组件装饰器中。

这可能吗？如果是如何？

Answer 1

我认为您正在寻找指令ngstyle和ngclass

如果要更改单个CSS属性，请选择这样的ngstyle：

<some-element [ngStyle]="{'font-size': styleExp}">...</some-element>

您的styleExp可能是

的条件语句

  isSmall ? 80% : 100%

如果要应用样式类，则需要使用这样的ngclass：

<some-element [ngClass]="{boolExp ? 'first' :'second'}">...</some-element>    
<some-element [ngClass]="{'first': boolExp }">...</some-element>

您的boolexp必须返回布尔值。您可以在多个类中使用不同的组合。

使用上面的URL进行参考。

这是用于学习目的的另一个URL：