Instructions en étapes Angular5 pour ajouter une classe de style aux balises de composants

Cette fois, je vais vous apporter les instructions étape par étape pour ajouter des classes de style aux balises de composants dans Angular5. Quelles sont les précautions pour ajouter des classes de style aux balises de composants dans Angular5. cas pratique, jetons un coup d'oeil.

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';
 }
}

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

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

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

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 :

Explication détaillée de l'utilisation de React Router v4

Instructions pour démarrer avec les formulaires vue

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!