Angular 4如何应用动态样式？

Question

是否可以为Angular 4中的重复span元素应用动态top和left值？

Answer 1

您可以使用：

1. [style.anything]绑定，例如：<span [style.color]="red"></span>
2. 允许一次指定多个CSS属性的[ngStyle]绑定，例如：<span [ngStyle]="{'color': 'red', 'font-weight': condition? 'bold':'300'}"></span>
3. 动态应用CSS类名的[className]绑定，例如：<span [className]="condition? 'redText': 'blueText'"></span>

4. 允许同时指定多个CSS 类 的[ngClass]绑定，就像{<1}}对CSS 属性一样，例如： ngStyle

   <span [ngClass]="{'redText': condition1, 'blueText': condition2}"></span>接收一个对象作为其输入，并且仅当相应的值的计算结果为true时才应用该对象的每个键。

   例如，如果您正在迭代数组[ngClass]：

   items_array

   每个元素（ <span *ngFor="let i of items_array" [ngClass]="{'redText': i.shouldBeRed, 'blueText': i.shouldBeBlue}"> The span text </span> ）的CSS类将是：

   • i如果属性redText的计算结果为true（即：i.shouldBeRed，true，非空字符串或非空对象; < / LI>
   • 1如果属性i.shouldBeBlue评估为true;
   • blueText如果两个属性都评估为true。

在您的情况下，我认为redText blueText是合适的：

[ngStyle]