Quelles sont les méthodes de liaison de style dans Angular 2+

Cet article présente principalement la méthode d'analyse de la liaison de style Angular 2+. Maintenant, je le partage avec vous et le donne comme référence.

Introduction

Cela fait un an et demi que j'ai développé ngx (angular 2+ s'appellera ngx à partir de maintenant Quand j'ai commencé). en développement, j'ai toujours utilisé La version RC d'angular2 est maintenant publiée sous le nom d'angular5 Le temps passe vite !

ngx est un framework basé sur des composants depuis le début, donc tout, d'une page à un bouton, est un composant.

Cela implique la réutilisation de composants lors de la conception de composants universels, une liaison de style dynamique est essentielle.

Avec le recul, angulaire nous fournit vraiment plusieurs méthodes de liaison de propriétés.

Ensuite, examinons de plus près comment utiliser la liaison de style dans les composants.

reliure de style

[style.propertyName]

Nous avons un bouton, la valeur par défaut Le style est celui de bootstrap, primary

Si les tailles des boutons sont différentes sur différentes pages, vous devez lier dynamiquement la taille de la police des boutons. Vous pouvez utiliser

pour y parvenir. ce. [style.propertyName]

Code dans le modèle

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Code dans la classe Component

private fontSize: string = "2em";

Le résultat est le suivant :

Si nous devons également définir dynamiquement le rayon de bordure du bouton

, le code dans le border-radius

modèle devient :

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

Le code dans la classe Component devient :

private fontSize: string = "2em";
private borderRadius: string = "10px";

Le résultat devient :

Il n'est pas facile d'utiliser [style.propertyName] pour lier des propriétés de style, mais une fois qu'il y a de nouveaux besoins, nous devons continuer à ajouter. À ce stade, il y aura de plus en plus de propriétés liées au composant. Existe-t-il un moyen pour nous de créer un

pour stocker les propriétés que nous devons lier ? Bien sûr, [ngStyle] peut nous aider à y parvenir. object

[ngStyle]

Donc, dans l'exemple ci-dessus, nous pouvons directement utiliser

pour lier dynamiquement les [ngStyle] et font-size du bouton. Le code dans le border-radius

modèle devient :

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

Le code de la classe Component devient :

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

Le résultat est :

[style.propertyName] contre [ngStyle]

[style.propertyName] ne peut lier qu'une seule propriété à la fois

tandis que [ngStyle ] peut lier plusieurs propriétés en même temps

Lorsque [style.propertyName] et [ngStyle] lient la même propriété, par exemple, les deux doivent être modifiées dynamiquement

, font-size[style.propertyName]则会覆盖[ngStyle]里面的同一属性.

Bien sûr, en plus de la liaison de style, nous pouvons également utiliser la liaison de classe pour modifier dynamiquement les styles.

liaison de classe

[class.className]

En utilisant de cette façon, nous pouvons dynamiquement ajoutez ou supprimez des classes CSS en fonction de la valeur de la variable de liaison.

J'utilise toujours l'exemple du bouton pour le moment.

alors le code devient :

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

Le résultat est comme indiqué :

La police semble un peu petite, ajoutons il dynamiquement Une classe qui change la police : my

A ce moment, le code devient :

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

Le résultat est comme indiqué :

[ngClass]

Comme [ngStyle], angulaire nous fournit également une instruction [ngClass] pour lier dynamiquement plusieurs classes CSS.

Ensuite, nous pouvons utiliser [ngClass] pour refactoriser le code ci-dessus

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{&#39;btnFont&#39;: changeFont, &#39;btnBorder&#39;: changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

Le résultat est toujours :

[ngClass ] Vous devez lier un objet, la clé est le nom de la classe CSS et la valeur est la variable liée.

[class.className] vs. [ngClass]

[class.className] ne peut lier qu'une seule classe CSS à la fois.

Et [ngClass] peut lier plusieurs classes CSS en même temps.

Lorsque [class.className] et [ngClass] doivent modifier dynamiquement le même style, par exemple, les deux doivent modifier dynamiquement

, font-size[class.className]则会覆盖[ngClass]里面的统一样式.

[className ]

Angular fournit également une méthode de liaison, qui consiste à changer dynamiquement le style directement en modifiant le

de l'élément. className

Mais je

l'utilise de cette façon, pourquoi je ne le recommande pas ? Regardez l'exemple ci-dessous 不推荐

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

mais le résultat devient comme ceci :

Notre bootstrap prédéfini primary a été supprimé car [className] ajoutera le nom de classe lié dynamiquement, puis supprimera tous les noms de classe précédents.
Cette méthode de liaison est donc très dangereuse, car pour un composant, nous avons généralement plusieurs types pour contrôler conjointement le style.

Dans les composants généraux, l'utilisation de [className] est fortement déconseillée.

Résumé

Enfin, résumons les caractéristiques et les différences des différentes liaisons de style en angulaire :

1. [style propertyName. ] lie directement une valeur de style de type chaîne ou une variable de type chaîne. Il a la priorité la plus élevée et écrasera les attributs de style existants.

2. [ngStyle] lie un objet de combinaison de styles, la clé est le nom de l'attribut CSS et la valeur est la valeur de style correspondante ou une variable de type chaîne.

3. [class.className] lie directement les variables de type vrai/faux ou booléen.

4. [ngClass] lie un objet qui est une combinaison de noms de classe CSS. La clé est le nom de la classe CSS et la valeur est une variable de type vrai/faux ou booléen.

5. [className] lie directement le nom de la classe CSS ou la variable de type chaîne. (Cette méthode n'est pas recommandée)

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Implémentation de la méthode de chargement d'images statiques locales via v-for in vue (tutoriel détaillé)

Comment faites-le dans vue Résoudre le problème du rouge et de l'avertissement lors de l'utilisation de v-for (tutoriel détaillé)

Comment implémenter la fonction de correspondance de recherche dans Vuejs (tutoriel détaillé)

Utilisez la liste déroulante de sélection dans vue.js pour implémenter les méthodes de liaison et de valeur

Utilisez Vuejs pour utiliser l'index pour ajouter une classe au premier élément de v-for Et quelles sont les étapes spécifiques ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!