web-dev-qa-db-fra.com

Différence entre la liaison [ngClass] vs [class]

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

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">
angularsingle-page-applicationangular2-directivesangular-ng-class
31
Ben Taliadoros

Ceci est spécial Angular angulaire

<div [class.extra-sparkle]="isDelightful">

Cela fait partie du compilateur Angular et vous ne pouvez pas créer de variante de liaison personnalisée suivant ce style de liaison. Les seuls pris en charge sont [class.xxx]="...", [style.xxx]="...", et [attr.xxx]="..."

ngClass est une directive Angular angulaire comme vous pouvez la construire vous-même)

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

ngClass est plus puissant. Il vous permet de lier une chaîne de classes, un tableau de chaînes ou un objet comme dans votre exemple.

29
Günter Zöchbauer

Les deux lignes de code ci-dessus concernent liaison de classe CSS en angulaire.Il existe en gros deux ou trois manières de lier une classe css à angular composants

Vous fournissez un nom de classe avec class.className entre parenthèses dans vos modèles, puis une expression à droite qui doit donner la valeur true ou false pour déterminer si la classe doit être appliquée. extra-sparkle (key) est la classe css et isDelightful (valeur).

<div [class.extra-sparkle]="isDelightful">

Lorsque plusieurs classes devrait potentiellement être ajouté, la directive NgClass est très utile. NgClass devrait recevoir un objet avec les noms de classe sous forme de clés et d'expressions évaluées comme étant vraies ou fausses. Scintillant est la clé et isDelightful la valeur (booléen).

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

Maintenant, avec un éclat supplémentaire, vous pouvez également scintiller votre div.

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

ou

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;

     sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter()'>

Pour ngClass, vous pouvez également avoir des opérateurs ternaires conditionnels.

10
Hameed Syed

En utilisant [ngClass] vous pouvez appliquer plusieurs classes de manière très pratique. Vous pouvez même appliquer une fonction qui renverra un objet de classes. [class. vous permet d’appliquer une seule classe (bien sûr, vous pouvez l’utiliser plusieurs fois mais c’est très mauvais).

3
elzoy

Dans [ngClass], vous pouvez ajouter l'une des deux classes suivantes:

<div [ngClass]="a === b ? 'class1' : 'class2'">
3
FierceDev