Méthode Angular5 pour ajouter une classe de style à la balise du composant lui-même

Cet article présente principalement la méthode d'ajout d'une classe de style à l'étiquette du composant lui-même dans Angular 5. Maintenant, je le partage avec vous et le donne comme référence.

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 : Utiliser : sélecteur d'hôte dans le style

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

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

Articles connexes :

Méthode de téléchargement Ajax pour implémenter le traitement js basé sur les données de retour côté serveur

Imbrication ajax double couche ( can Multi-layer) exemple d'utilisation

Implémentation Ajax du code de fonction de sélection de ville contextuelle sans actualisation

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!