Fermer

février 10, 2021

Introduction au style et à l'isolation de style en angulaire


Dans cet article, vous découvrirez comment styliser vos composants angulaires avec des exemples pratiques et vous donnerez un aperçu de l'isolation de style dans Angular.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article , vous devriez avoir:

  • Un environnement de développement intégré tel que VS Code
  • Node version 11.0 ou supérieure installée sur votre ordinateur
  • Node Package Manager version 6.7 ou supérieure (généralement livré avec l'installation Node)
  • Angular CLI version 8.0 ou supérieure
  • La dernière version d'Angular
  • Téléchargez le projet de démarrage de ce tutoriel ici pour suivre les démonstrations
  • Décompressez le projet et initialisez les modules de nœuds dans votre terminal avec cette commande: npm install

D'autres choses intéressantes incluent:

  • Une connaissance pratique du framework Angular à un niveau débutant

Dans cet article, vous découvrirez comment styliser tu r Composants angulaires avec des exemples pratiques et un aperçu de la façon dont l'isolation de style est effectuée dans Angular.

Styling Angular Components

Les styles CSS peuvent être ajoutés à vos composants angulaires de trois façons environ:

  1. feuille de style
  2. Directement dans les métadonnées
  3. Utilisation de la balise de style

Lien vers une feuille de style

C'est la manière par défaut créée par Angular pour gérer le style. Cette approche utilise la stratégie d'encapsulation de la vue angulaire pour garantir que chaque composant possède sa propre feuille de style. Si vous avez téléchargé et ouvert le projet de canevas dans votre IDE, vous pouvez générer un nouveau composant à l'aide de l'interface de ligne de commande avec la commande ci-dessous:

ng generate component test

Vous pouvez voir qu'il y a quatre nouveaux changements, dont trois nouveaux fichiers et une mise à jour du module d'application:

Vous pouvez voir que ce nouveau composant de test est livré avec sa propre feuille de style appelée test.component.css dans le dossier du composant de test. Votre fichier test.component.ts montre comment la liaison est effectuée:

 import   { Component  OnInit }   from   '@ angular / core «; 
@  Composant  ( {
  sélecteur :   'app-test' 
  templateUrl :   './ test.component.html' 
  styleUrls :   [ './ test.component.css' ] 
} ) 
 export   class   TestComponent   implements [19659042] OnInit   {
 constructeur  ()   { } 
 ngOnInit  ()   {
  } 
 } 

Semblable à la façon dont les feuilles de style CSS sont liées dans la section d'en-tête d'un fichier HTML, Angular fournit cela prêt à l'emploi pour chaque composant.

Une autre façon de styliser votre composant dans Angular est de spécifier directement les règles CSS dans les métadonnées de votre composant. Pour illustrer cela avec notre composant de test, ouvrez le fichier HTML du composant de test et remplacez le contenu par le bloc de code ci-dessous:

 < h2 > 
   < a   target  ] =  " _blank "    rel  =  " noopener "    href  =  ] " https://angular.io/cli "  >  Test Works  </  a > 
 </  h2 >  

Ouvrez maintenant le fichier principal de l'application component.html et remplacez le contenu par le bloc de code ci-dessous:

 < div   style  = " text-align :  center "  > 
   < h1 > 
    Bienvenue à {{title}}!
   </  h1 > 
 </  div > 
 < h2 >  Voici quelques liens pour vous aider à démarrer:  </  h2 > 
 < ul > 
   < li > 
     < h2 >   < a   target  =  " _blank "    rel  =  " noopener "    href  =  " https://angular.io/tutorial "  >  Tour of Heroes  </  a >   </  h2 > 
   </  li [19659028]> 
   < li > 
     < h2 >   < a   target  =  " _blank "    rel  =  " noopener "    href  =  " https://angular.io/cli "  >  Documentation CLI  </  a >   </  h2 > 
   </  li  > 
   < li > 
    < app-test >   </  app-test > 
   </  li > 
 </  ul > 
 < router-outlet >   </  router-outlet >  

Vous pouvez voir que nous avons introduit le composant de test dans le composant d'application à afficher en tant qu'élément de liste. Si vous exécutez l'application sur le serveur de développement avec la commande serve, vous verrez que les éléments de la liste sont tous en gras et soulignés. Pour styliser le composant de test, qui est le tout dernier élément de la liste, ajoutons des styles directement dans les métadonnées du composant.

Ouvrez le fichier test component.ts et dans la section des métadonnées, changez stylesURL en styles comme ci-dessous:

 import   { Component  OnInit }   from   '@ angular / core' ; 
@  Composant  ( {
  sélecteur :   'app-test' 
  templateUrl :   './ test.component.html' 
  styles :   [ 'a {text-decoration: none}' ] 
} ) 
 export   class   TestComponent   implements   OnInit   {
 constructeur  ()   { } 
 ngOnInit  ()   {
  } [19659038]} 

Ce style remplace la décoration de texte de lien par défaut du soulignement par aucun. Maintenant, l'application ressemble à ceci:

 «Voici quelques liens pour vous aider à démarrer» est en noir. Une liste à puces en texte souligné bleu indique

Utilisation de la balise de style

Une autre façon de styliser votre composant angulaire consiste à utiliser la balise de style à l'intérieur du composant lui-même. Ceci est toujours fait dans les métadonnées d'un composant, donc avec notre démo vous pouvez spécifier le modèle du composant comme ceci:

 import   { Component  OnInit }   de   '@ angular / core' ; 
@  Composant  ( {
  sélecteur :   'app-test' 
  modèle :  `

Test Works

`
} ) export class TestComponent implements OnInit { constructor ] () { } ngOnInit () { } }

Ceci affiche exactement la même chose que l'autre exemples aussi. Vous pouvez également voir que des tiques arrière ont été utilisées à cet endroit à des fins de présentation. Avec des graduations inverses, le code du modèle peut être sur plusieurs lignes comme nous l'avons dans le bloc de code ci-dessus.

De ces trois approches, il est toujours conseillé d'utiliser l'approche par défaut angulaire, qui est liée à une feuille de style. Cela garantit que vous, le développeur, tirez parti de l'isolation de style, qui est une fonctionnalité fournie avec chaque composant angulaire qui garantit que les styles définis sont étendus au composant où la définition a été faite.

Fonctionnement de l'isolation de style angulaire

In Style CSS, les règles peuvent parfois être écrasées par d'autres règles, et pour de nombreuses raisons. Cela peut être dû à l'héritage (relation parent-enfant). Cela peut également être dû à des styles en ligne ajoutés audit élément ou à l'utilisation d'un élément de style dans les métadonnées de votre composant. Celles-ci ont toujours l'air désordonnées et ne sont donc pas recommandées pour la présentation et la compatibilité entre navigateurs.

Avec l'approche de liaison, Angular isole les styles de composants individuels en leur donnant une propriété de contenu puis en les appliquant à l'initialisation afin qu'ils ne soient pas écrasés par tout autre style. Si vous regardez notre exemple précédent de l'approche de liaison:

 import   { Component  OnInit }   from   '@ angular / core «; 
@  Composant  ( {
  sélecteur :   'app-test' 
  templateUrl :   './ test.component.html' 
  styleUrls :   [ './ test.component.css' ] 
} ) 
 export   class   TestComponent   implements [19659042] OnInit   {
 constructeur  ()   { } 
 ngOnInit  ()   {
  } 
 } 

Si vous exécutez à nouveau l'application sur le serveur de développement et inspectez les outils de développement de votre navigateur, voici ce que vous verrez:

 la décoration de texte définie pour souligner a été barrée

Il y a la balise link (a) et une propriété appelée 'ngcontent-gif-c1' dessus. Il s'agit de la propriété de contenu ajoutée à la balise de lien pour garantir que seule la balise de lien du composant de test a sa décoration de texte définie sur aucune. Si vous regardez de plus près, vous verrez que, en raison de ce changement, la règle par défaut du soulignement a été écrasée. C'est ainsi qu'Angular réalise l'isolation de style pour tous les composants angulaires.

Conclusion

Cet article vous a montré trois façons de styliser vos composants angulaires avec des illustrations pratiques. Vous avez également vu comment les styles de vos composants angulaires sont étendus via une approche d'isolation de style. Restez à l'écoute sur le blog, car il y a d'autres articles intéressants sur Angular . Bon piratage!




Source link