Maison > interface Web > js tutoriel > le corps du texte

Comment ajouter des classes de style aux balises de composants à l'aide d'Angular5

php中世界最好的语言
Libérer: 2018-05-26 15:35:56
original
1653 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser Angular5 pour ajouter des classes de style aux étiquettes de composants. Quelles sont les précautions à prendre pour utiliser Angular5 pour ajouter des classes de style aux étiquettes de composants ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Il existe deux façons d'ajouter des styles aux balises du composant lui-même dans Angular 5 :

Méthode 1 : utiliser l'attribut host de @Component

@Component({
 selector : 'myComponent',
 host : {
  '[style.color]' : "'red'", 
  '[style.background-color]' : 'backgroundColor'
 }
})
class MyComponent {
 backgroundColor: string;
 constructor() {
  this.backgroundColor = 'blue';
 }
}
Copier après la connexion

Ajoutez des attributs dans la configuration de l'hôte, ce qui équivaut à l'utilisation d'attributs de liaison sur les étiquettes.

Définir le style :

  1. '[style.color]' : "'red'": Notez qu'il y a un guillemet simple à l'intérieur des guillemets doubles de la valeur rouge .

  2. '[style.background-color]':'backgroundColor' : Ceci fait référence à la variable backgroundColor dans le composant.

L'avantage de cette méthode est que vous pouvez utiliser des variables de composants dans les styles.

Définir la classe :

@Component({
 selector : 'myComponent',
 host : {
  '[class.myclass]' : 'showMyClass'
 }
})
class MyComponent {
 showMyClass = false;
 constructor() {
 }

 toggleMyClass() {
  this.showMyClass = !this.showMyClass;
 }
}
Copier après la connexion

Méthode 2 : Utilisation : sélecteur d'hôte dans le style

@Component({
 selector : 'myComponent',
 styles : [`
  :host {
   color: red;
   background-color: blue;
  }
 `]
})
class MyComponent {}
Copier après la connexion

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser correctement le répertoire et la configuration de la structure du projet vuex

Comment gérer vue- chargement paresseux du routeur Le chargement de trop de ressources pour la première fois entraîne une vitesse lente

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal