Angular 条件类被覆盖答案

【问题标题】：Angular conditional class gets overriddenAngular 条件类被覆盖
【发布时间】：2019-06-07 16:26:03
【问题描述】：

我有 2 个 CSS 类，date-today 有条件地应用于一个元素，但它不起作用，因为日期会覆盖它。

.date-today {
    color: red;
}

.date {
    color: green;
}

组件：

[ngClass]="{ 'date-today': date.isToday() }"

如何让date-today 类覆盖date？

【问题讨论】：

【解决方案1】：

更改css规则的顺序以防止覆盖（它调用specificty）

/*date first*/
.date {
    color: green;
}
/*date-today second*/
.date-today {
    color: red;
}

<div class="date date-today">
date
</div>

查看规则顺序发生变化时会发生什么：

.date-today {
    color: red;
}
.date {
    color: green;
}

<div class="date date-today">
date
</div>

【讨论】：

【解决方案2】：

您可以将color: red; 更改为color: red!important;，但也许您可以移动您的date 类设置到[ngClass] 并按如下顺序放置

[ngClass]="{ 
    'date': !date.isToday(),
    'date date-today': date.isToday()
}"

【讨论】：

【解决方案3】：

你可以用这个

<p [class.date]="!today" [class.date-today]="today">
  Start editing to see some magic happen :)
</p>
<button (click)="today = true">today</button>

【讨论】：