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

pour y parvenir. ce. [style.propertyName]

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

private fontSize: string = "2em";

, le code dans le border-radius

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

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

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

[ngStyle]

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

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

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

[style.propertyName] contre [ngStyle]

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

liaison de classe

[class.className]

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

//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;

//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;

[ngClass]

//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;

[class.className] vs. [ngClass]

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

[className ]

de l'élément. className

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";

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!