css - 如何应用条件CSS？

Question

我有一个组件 item，它代表一张卡片，其中包含关于该元素的数据。由于所有卡片都具有相同的结构(价格/颜色/尺寸/照片类别显示在每张卡片上，仅此而已)，我想应用条件 CSS，但我不知道如何，因为卡片' 风格(略有)不同基于:

• 价格(例如，价格越低卡越大)
• 如果用户已将其标记为收藏
• 它们是这个还是那个组件的一部分(URL 可以相同)。例如，在单个 View 中，第一个组件具有 X 卡片样式，第二个组件具有 Y 卡片样式 - 但卡片具有相同的数据。

我真的很感激任何建议!

Answer 1

<div [className]="'example-class'"></div>

这允许我们根据条件添加类:

<div [className]="condition ? 'example-class' : 'other-class'"></div>

或者我们可以在运行时构建类名:

<div [className]="'class' + someValue"></div>

我们可以像这样轻松切换 CSS 类:

<div [class.example-class]="condition"></div>

我们可以分配一个变量类名:

<div [ngClass]="seleted-class"></div>

NgClass 还可以同时分配多个静态类名:

我们还可以使用 ngClass 根据多个条件分配多个 CSS 类。

<div
  [ngClass]="{
  'example-class': condition,
  'other-class': !condition
}"
></div>


<div [ngClass]="['example-class', 'other-class']"></div>

来源:https://malcoded.com/posts/angular-ngclass/