html - 添加基于条件/输入属性 Angular 2+ 的 CSS 样式 url

Question

我有一个组件，它在应用程序中的两个地方使用过，一个用于列表，另一个用于 slider ，唯一的区别在于 CSS，一个具有更大的 View ，另一个具有更小的 View 和一些其他 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 必须返回一个 bool 值。您可以对多个类使用不同的组合。

使用上面的 url 作为引用。

Here是另一个用于学习目的的 URL: