Angular 2应用程序中各个组件之间的共享样式 [英] Shared styles across components in an Angular 2 app

问题描述

我的Angular 2应用程序中有一些CSS规则，这些规则在各个组件之间是通用的.显然，我不想将其复制并粘贴到每个组件的样式中.我目前有2个想法:

I've got some CSS rules in my Angular 2 app that would be common across various components. Obviously I don't want to copy&paste them into each component's styles. I currently have 2 ideas:

1. 将常见的CSS规则放置在静态CSS文件中，并使用index.html的head部分中的链接将其包括在内.
2. 将我的通用CSS规则放置在一个或多个文件中，并将其包含在每个组件的@Component装饰器中，例如 styleUrls: [ './myComponentStyle.css', '../common/common.css']

1. Place common CSS rules in a static CSS file and include it using a link in my index.html's head section.
2. Place my common CSS rules in one or more files and include them in @Component decorator for each component, e.g. styleUrls: [ './myComponentStyle.css', '../common/common.css']

第一种方法在我看来并不那么繁琐，但同时肯定可以工作且易于实现.

First approach look not-so-angular-ish to me, but at the same it's sure to work and simple to implement.

第二个需要对每个组件进行一些工作，但可以更好地控制一个组件使用的样式.它还使我可以将常用样式组织成较小的样式表，并仅使用所需的样式.

Second one requires some work to be done with each component, but allows more control about what styles are being used by one. It also lets me to organize my common styles into smaller stylesheets and use only ones that are needed.

您赞成其中任何一种解决方案，还是有第三种更好的解决方案? :)

Do you favor any of those solutions or is there a third, better one? :)

推荐答案

1..此解决方案虽然不错，但它更适用于所有常用样式，所有样式均应可用.例如，css网格的样式. 为了使其更加棱角分明，您可以将应用程序组件的封装设置为无:

1. This solutions is good, but it's more suitable for any common styles, which should be available for all components. For example, styles for css grids. To make it more angularish you could set encapsulation for you app component to none:

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

示例可以在此处找到(插件)

注意:这种方式包含的样式(仅添加样式标签或使用非封装)将影响页面上的所有元素.有时是我们真正想要的(同意将任何CSS框架用于Hole项目).但是，如果只想在几个组件之间共享样式，那可能不是最好的方法.

Note: Styles, included by this ways (just adding style tag, or with non encapsulation) will affect all elements on your pages. Sometimes it is want we really want (agreement to use any css framework for hole project). But if just want to share styles between few component - it would be probably not the best way.

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

2..我喜欢这种解决方案，因为它非常容易理解且行为可预测. 但是有一个问题:

2. I like this solution, because it is very understandable and has predictable behavior. But there is one problem with it:

它将在每次使用时添加带有共享样式的样式标签. 如果您的样式文件很大，或者正在使用的元素很多，则可能会出现问题.

It will add style tag with your shared styles every time you use it. It could be a problem if you have big style file, or many element which are using it.

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

示例可以在此处找到(插件)

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

3..您还可以使用一个选项. 只需再创建一个组件即可为其子代提供共享样式.

3. There is one more option you could use. Just create one more component which will provide shared styles for it's children.

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

在这种情况下，您将必须在样式中使用/deep/才能使样式可用于子组件:

In those case you will have to use /deep/ in your styles to make style available for child components:

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

我还值得一提的是不要忘记使用:host使样式仅仅可用于子元素.如果您省略它，您将再获得一种整体风格.

I also worth to be mentioned not to forget use :host to make styles available only for child elements. If you omit it you will get one more global style.

示例可以在此处找到(插件)

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

---

注意:样式封装确实是很酷的功能.但是您还应该记住，没有任何方法可以限制您的深层样式.因此，如果您应用深层样式，则绝对适用于所有儿童，因此也请谨慎使用.

---

Notes: Encapsulation of styles is really cool feature. But you also should remember that there no way to limit your deep styles. So if you applied deep styles, it would available absolutely to all children, so use it careful too.

这篇关于Angular 2应用程序中各个组件之间的共享样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！