Quelle est la différence dans Angular 2 entre les extraits suivants :
<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">Il s'agit de la syntaxe spéciale de liaison Angular
<div [class.extra-sparkle]="isDelightful">Cela fait partie du compilateur Angular et vous ne pouvez pas créer une variante de liaison personnalisée suivant ce style de liaison. Les seules liaisons prises en charge sont [class.xxx]="..." , [style.xxx]="..." et [attr.xxx]="..."
ngClass est une directive Angular normale 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 de caractères ou un objet comme dans votre exemple.
Ah donc, dans la documentation, lorsque l'on dit <div [attr.role]="myAriaRole">, on lie l'attribut role de la div et non l'attribut role d'un objet appelé attr dans le contrôleur. C'est plus clair, merci.
attr.foo sert à lier des attributs au lieu de propriétés. Voir stackoverflow.com/questions/6003819/ . @Input() des composants et directives Angular sont traités comme des propriétés. La liaison aux attributs ne prend en charge que les valeurs de type chaîne, tandis que les attributs prennent en charge tout type de valeur. S'il existe un @Input() avec un nom correspondant utilisé pour lier l'attribut, la valeur sera également transmise à l'objet @Input() . Si vous vous liez à un attribut natif d'un élément (tel que for sur <label> Dans ce cas, le navigateur a sa propre implémentation de la manière dont la valeur est reflétée dans la propriété.
Merci, bien que je pense que "Binding to attributes only supports string values, attributes support any kind of value." a peut-être été mal saisi ?
Les deux lignes de code ci-dessus sont relatives à CSS class liaison dans Angular. Il existe essentiellement 2 ou 3 façons de lier une classe css à un composant Angular.
Vous fournissez un nom de classe avec class.className entre parenthèses dans vos modèles, puis une expression à droite qui doit être évaluée à true ou false pour déterminer si la classe doit être appliquée. C'est le cas de l'exemple ci-dessous, où extra-sparkle(key) est la classe css et isDelightful(value) .
<div [class.extra-sparkle]="isDelightful">Lorsque plusieurs classes devrait potentiellement être ajouté, le NgClass est très utile. NgClass doit recevoir un objet avec des noms de classe comme clés et des expressions qui valent true ou false. extra-sparkle est la clé et isDelightful est la valeur ( boolean ).
<div [ngClass]="{'extra-sparkle': isDelightful}">Maintenant, en plus de l'éclat supplémentaire, vous pouvez scintiller votre div également.
<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">ou
export class AppComponent {
isDelightful: boolean = true;
isGlitter: boolean = true;
get sparkleGlitter()
{
let classes = {
extra-sparkle: this.isDelightful,
extra-glitter: this.isGlitter
};
return classes;
}
}
<div [ngClass]='sparkleGlitter'>Pour ngClass vous pouvez aussi avoir des opérateurs ternaires conditionnels.
Utilisation de [ngClass] vous êtes en mesure d'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 de n'appliquer qu'une seule classe (bien sûr, vous pouvez utiliser class. plusieurs fois, mais cela fait vraiment mauvais effet).
Ce comportement dans la réponse ne distingue pas [ngClass] . Vous pouvez faire de même avec [class] .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Il est intéressant de noter qu'il existe également une
[className]qui peut être utilisé comme suit<div [className]="isDelightful ? 'extra-sparkle'">.2 votes
N'auriez-vous pas besoin de compléter le ternaire avec un
:? Sinon, l'utilisation de && à la place de ? sera valide.