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

Question

我有一个组件，它在应用程序中有2个位置使用，一个用于列表，另一个用于滑块，只有区别在于CSS，一个有更大的视图，另一个有更小的和一些其他CSS更改。

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

这可能吗？如果是的话怎么样？

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必须返回一个布尔值。您可以为多个类使用不同的组合。

使用上面的网址作为参考。

Here是另一个用于学习目的的网址：