Différence entre les liaisons [ngClass] et [class].

Question

Quelle est la différence dans Angular 2 entre les extraits suivants :

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

Answer 1

Oui, avec l'aide de la liaison de classe ([class]), nous pouvons également attacher plusieurs classes css avec les dernières versions. ex :[class]='{objet avec la clé comme nom de classe et la valeur comme true/false}' comme [ngClass]. Il n'y a donc aucune différence entre la liaison [class] et la directive [ngClass] intégrée.

Answer 2

Personne n'a mentionné que si on utilise les deux [class] et [ngClass] une certaine confusion peut se produire lorsque vous essayez de passer une chaîne de classe à [class] qui est "enregistré" par [ngClass] . Ils peuvent être compétitifs.

Par exemple, cela n'attribuera pas la valeur de la classe 'd-flex' à l'objet [class] à condition que [ngClass] la condition qui est associée à cette classe a une condition vraie

composant.html

<div [ngClass]="{'d-flex': falseCondition}" [class]="getClassBasedOnCondition()">

component.ts

public getClassBasedOnCondition(): string {
    return trueCondition ? 'd-flex' : '';
}

Vous pouvez utiliser [class.] au lieu de [ngClass] pour éviter un tel comportement tant que vous n'avez pas d'alliage de classes à cet endroit, par exemple [ngClass]="{'d-flex p-1': condition}"