2
votes

La classe conditionnelle angulaire est remplacée

J'ai 2 classes CSS, date-aujourd'hui est appliqué conditionnellement à un élément mais cela ne fonctionne pas car la date le remplace.

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

Componenet:

.date-today {
    color: red;
}

.date {
    color: green;
}

Comment puis-je faire en sorte que la classe date-today remplace date?

angular html css

2 commentaires

Pouvez-vous fournir le code html complet que vous avez utilisé ainsi que vos ts qui ont date.isToday () ??

pourquoi ne pas simplement supprimer le tiret et écrire la classe comme dateToday ? De cette façon, il ne devrait pas le remplacer ...

3 Réponses :

0
votes

Modifiez l'ordre des règles css pour empêcher le remplacement (il appelle specificty )

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

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

Voir ce qui se passe lorsque l'ordre des règles change:

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

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

0 commentaires

0
votes

Vous pouvez changer la couleur: rouge; en couleur: rouge! important; mais peut-être que vous pourriez déplacer votre date dans le paramètre de classe [ngClass] et placez-le dans l'ordre comme ci-dessous

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

0 commentaires

0
votes

vous pouvez utiliser ce

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

0 commentaires