La différence entre [ngClass] vs [classe] de liaison

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

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

InformationsquelleAutor Ben Taliadoros | 2017-07-26

34

C'est spécial Angulaire de la syntaxe de liaison
```
<div [class.extra-sparkle]="isDelightful">
```
C'est une partie de l'écart Angulaire compilateur et vous ne pouvez pas construire une liaison personnalisée variante la suite de cette liaison style. La seule prise en charge sont [class.xxx]="...", [style.xxx]="...", et [attr.xxx]="..."

ngClass est normal Angulaire de la directive comme vous pouvez le construire vous-même
```
<div [ngClass]="{'extra-sparkle': isDelightful}">
```
ngClass est de plus en plus puissants. Il vous permet de lier une chaîne de classes, un tableau de chaînes de caractères, ou un objet, comme dans votre exemple.
- Ah si dans les docs quand il dit <div [attr.le rôle]="myAriaRole"> c'est la liaison de l'attribut role de la div pas le rôle d'attribut d'un objet appelé attr à partir du contrôleur. De sens, merci
- attr.foo est pour la liaison à des attributs plutôt que des propriétés. Voir stackoverflow.com/questions/6003819/.... @Input() Angulaire des composants et des directives sont traités comme des propriétés. La liaison aux attributs prend uniquement en charge les valeurs de chaîne, support attributs de la valeur. Si il y a un @Input() avec un nom correspondant utilisé pour la lier à l'attribut, la valeur sera également transmis à la @Input(). Si vous liez à un élément natif d'attribut (comme for dans <label> , puis le navigateur dispose de sa propre mise en œuvre de la façon dont la valeur correspond à la propriété.
- Merci, bien que je pense de "Liaison à des attributs prend uniquement en charge les valeurs de chaîne, support attributs de la valeur." peut avoir été mal saisi?
- merci, vous avez raison. Il doit être "propriétés support de tout type de valeur".
- Donc, ce qui est le mieux dans ce scénario pour la performance? N'est pas question que celle que vous utilisez?
- La liaison à class est probablement plus rapide, parce que cela affecte l'ensemble de la chaîne. ngClass a regarder l'expression et peut-être ajouter/supprimer des classes lorsque les modifications de l'expression. Il est généralement préférable d'utiliser ngClass de toute façon, parce que la liaison à class juste écrase les classes pouvant être définie à partir de l'ailleurs et de la performance argument est probablement juste une optimisation prématurée cas.
InformationsquelleAutor Günter Zöchbauer
13

Le dessus de deux lignes de code à l'égard de classe CSS de liaison Angulaire.Fondamentalement, il y a 2-3 façons que vous pouvez lier la classe css angulaire composants

Vous fournir un nom de classe avec classe.className entre parenthèses dans vos modèles puis une expression sur le droit qui devrait renvoyer true ou false pour déterminer si la classe doit être appliquée.Qui est au-dessous de celui où extra-étincelle(clé) est la classe css et isDelightful(valeur).
```
<div [class.extra-sparkle]="isDelightful">
```
Quand plusieurs classes devrait éventuellement être ajouté, le NgClass directive vient vraiment pratique. NgClass devraient recevoir un objet avec les noms de classe que les clés et expressions qui sont évaluées à true ou false.extra-sparkle est la clé et isDelightful est la valeur(boolean).
```
<div [ngClass]="{'extra-sparkle': isDelightful}">
```
Maintenant avec plus d'éclat ,vous pouvez paillettes de votre div également.
```
<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 avoir conditionnel ternaire opérateurs.

InformationsquelleAutor Hameed Syed
5

À l'aide de [ngClass] vous êtes en mesure d'appliquer plusieurs classes dans un vraiment agréable. Vous pouvez même appliquer une fonction qui retourne un objet de classes. [class. vous rend capable de les appliquer qu'une seule classe (bien sûr, vous pouvez utiliser la classe. quelques fois, mais il a l'air vraiment mauvais).

InformationsquelleAutor elzoy
5

Dans [ngClass] vous pouvez ajouter l'un des deux classes différentes comme ceci:
```
<div [ngClass]="a === b ? 'class1' : 'class2'">
```
- Vous pouvez également faire de ce <div class="{{a === b ? 'class1' : 'classe 2'}}">
- Ce comportement dans la réponse ne fait pas de distinction [ngClass]. Vous pouvez faire de même avec [class].
- comme déjà mentionné, la même chose peut être fait avec [classe] s'il vous plaît mettre à jour votre réponse.
InformationsquelleAutor FierceDev

Vous devez vous connecter pour publier un commentaire.