Les styles partagés à travers des composants dans Angulaire à 2 app

J'ai quelques règles CSS dans mon Angulaire 2 app qui serait commun à travers les différents composants. Évidemment, je ne veux pas copier&de les coller dans chaque composante de styles. Actuellement j'ai 2 idées:

  1. Lieu commun de règles CSS statique le fichier CSS et de l'inclure à l'aide d'un lien dans mon index.html's head section.
  2. Place ma commune règles CSS dans un ou plusieurs fichiers et de les inclure dans @Component décorateur pour chaque composant, par exemple
    styleUrls: [ './myComponentStyle.css', '../common/common.css']

Première approche n'est pas si angulaires-ish pour moi, mais en même temps, elle est sûre et simple à mettre en œuvre.

Seconde nécessite un certain travail à faire avec chaque composant, mais permet plus de contrôle sur ce que les styles sont utilisés par un. Il me permet aussi d'organiser ma commune styles dans des petites feuilles de style et d'utiliser seulement ceux qui sont nécessaires.

Ne vous en faveur d'une de ces solutions, ou est-il un troisième, meilleur? 🙂

InformationsquelleAutor krazimierz | 2016-02-29
  1. 31

    1. Cette solutions est bonne, mais il est plus approprié pour tout les styles, qui devrait être disponible pour tous les composants. Par exemple, les styles css pour les grilles.
    Pour le rendre plus angularish vous pouvez définir l'encapsulation pour vous app composant none:

    `@Component({
     selector: 'my-app',
     template: `  `,
     styleUrls: ["shared.style.css"],
     encapsulation: ViewEncapsulation.None
}) export class App {}`

    La démo peut être trouvé ici (plunker)

    Remarque: les Styles, les inclus par ce moyens (juste l'ajout de balise style, ou avec des non encapsulation) aura une incidence sur tous les éléments sur vos pages. Parfois, c'est que nous le voulons vraiment (accord d'utilisation de tout framework css pour le trou de projet). Mais si veux juste partager des styles entre quelques composants, il serait probablement pas la meilleure façon.

     Summary: 
 (+) easy to use
 (-) no encapsulation

    2. J'aime bien cette solution, parce que c'est très compréhensible et a un comportement prévisible. Mais il y a un problème avec elle:

    Il va ajouter le style de la balise avec vos styles à chaque fois que vous l'utilisez.
    Il pourrait être un problème si vous avez de gros fichiers de style, ou de beaucoup d'élément qui l'utilisent.

    Les styles partagés à travers des composants dans Angulaire à 2 app

    @Component({
   selector: 'first',
   template: `<h2>  <ng-content> </ng-content> </h2>`,
   styleUrls: ["shared.style.css"]
})
export class FirstComponent {}

    La démo peut être trouvé ici (plunker)

     Summary:
 (+) easy to use
 (+) encapsulation
 (-) duplicates styles for every usage

    3. Il y a une autre option que vous pourriez utiliser.
    Il suffit de créer un plus qui offrent des styles pour les enfants. 

      ` <styles-container>
    <first> first comp  </first>
  </styles-container>
  <styles-container>
    <second> second comp </second>
  </styles-container>`

    Dans ces cas, vous devez utiliser /de profondeur/dans vos styles pour faire style disponibles pour les composants enfants:

    :host /deep/ h2 {
  color: red;
}

    J'ai aussi le mérite d'être mentionné ne pas oublier d'utilisation :l'hôte de faire des styles disponibles seulement pour les éléments enfants. Si vous l'omettez, vous obtiendrez un plus de style global.

    La démo peut être trouvé ici (plunker)

    Summary:
(-) you have to create container and it in templates
(+) encapsulation
(+) no duplicated styles

    Notes: Encapsulation des styles est vraiment cool fonctionnalité. Mais il vous faut aussi rappeler qu'il y a aucune façon de limiter votre profonde styles. Donc, si vous avez appliqué profonde styles, il serait disponible absolument pour tous les enfants, afin de l'utiliser trop prudent.

    InformationsquelleAutor ilyabasiuk
  2. 1

    Il y a 3 façons d'utiliser les styles dans angular2 application (lien).
    Vous avez mentionné deux de celles qui vous permet de réutiliser les styles.

    Mon opinion personnelle est que pour toute application grand ses préférable d'aller avec #2, principalement en raison de la vue d'encapsulation fournis par angulaire.

    #1 peut être utilisé pour les vraiment très générique des styles qui sont communs à toutes les parties de votre application. Mais si vous prenez en compte le fait que la racine de votre SPA sera angulaire de la composante de toute façon il n'y a pas de réel besoin pour aller avec une autre approche de la liaison styles que le #2.

    En outre, en travaillant avec les css de deux façons différentes vous devrez vous rappeler de cela (et la poignée avec un certain code supplémentaire) lorsque, par exemple, le regroupement de votre application et en utilisant des outils comme gulp-inline-ng2-modèle

    InformationsquelleAutor Amid