CSS 在 Angular 2 应用程序中跨组件共享样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35702164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shared styles across components in an Angular 2 app
提问by krazimierz
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:
我的 Angular 2 应用程序中有一些 CSS 规则，这些规则在各种组件中都是通用的。显然我不想将它们复制并粘贴到每个组件的样式中。我目前有两个想法：
- Place common CSS rules in a static CSS file and include it using a link in my index.html's
headsection. - Place my common CSS rules in one or more files and include them in
@Componentdecorator for each component, e.g.styleUrls: [ './myComponentStyle.css', '../common/common.css']
- 将常见的 CSS 规则放在静态 CSS 文件中，并使用我的 index.html
head部分中的链接将其包含在内。 - 将我的常用 CSS 规则放在一个或多个文件中，并将它们包含在
@Component每个组件的装饰器中，例如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? :)
您喜欢这些解决方案中的任何一个，还是有第三种更好的解决方案？:)
回答by ilyabasiuk
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:
1.这个解决方案不错，但是更适合任何常见的样式，应该适用于所有组件。例如，css 网格的样式。为了使它更加棱角分明，您可以将应用程序组件的封装设置为无：
`@Component({
selector: 'my-app',
template: ` `,
styleUrls: ["shared.style.css"],
encapsulation: ViewEncapsulation.None
}) export class App {}`
Demo could be found here (plunker)
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.
注意：以这种方式包含的样式（仅添加样式标记或不封装）将影响页面上的所有元素。有时是我们真正想要的（同意使用任何 css 框架进行孔项目）。但是如果只是想在几个组件之间共享样式 - 这可能不是最好的方法。
Summary:
(+) easy to use
(-) no encapsulation
2.I like this solution, because it is very understandable and has predictable behavior. But there is one problem with it:
2.我喜欢这个解决方案，因为它非常易于理解并且具有可预测的行为。但它有一个问题：
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 {}
Demo could be found here (plunker)
Summary:
(+) easy to use
(+) encapsulation
(-) duplicates styles for every usage
3.There is one more option you could use. Just create one more component which will provide shared styles for it's children.
3.还有一个你可以使用的选项。只需再创建一个组件，为其子项提供共享样式。
` <styles-container>
<first> first comp </first>
</styles-container>
<styles-container>
<second> second comp </second>
</styles-container>`
In those case you will have to use /deep/ in your styles to make style available for child components:
在这种情况下，您必须在样式中使用 /deep/ 以使样式可用于子组件：
:host /deep/ h2 {
color: red;
}
I also worth to be mentioned not to forget use :host to make styles available onlyfor child elements. If you omit it you will get one more global style.
我还值得一提的是不要忘记使用 :host 使样式仅可用于子元素。如果省略它，您将获得另一种全局样式。
Demo could be found here (plunker)
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.
注意：样式的封装是非常酷的功能。但你也应该记住，没有办法限制你的深度风格。所以如果你应用了深度样式，它绝对适用于所有孩子，所以也要小心使用。
回答by Amid
There are 3 ways to use styling in angular2 app (link). You have mentioned two of those that allows you to reuse styles.
在 angular2 应用程序（链接）中有 3 种使用样式的方法。您已经提到了其中两个允许您重用样式的方法。
My personal opinion is that for any large application its preferable to go with #2 mainly due to the view encapsulation provided by angular.
我个人的观点是，对于任何大型应用程序，最好使用 #2，这主要是由于 angular 提供的视图封装。
#1 can be used for the really very generic styles that are common to all parts of your application. But if you will take into account that the root in your SPA will be angular component anyway - there is no real need to go with another approach of linking styles than #2.
#1 可用于应用程序所有部分通用的非常通用的样式。但是，如果您考虑到 SPA 中的根无论如何都将是角度组件 - 没有真正需要采用除 #2 之外的另一种链接样式方法。
Moreover by working with css in two different ways you will have to remember this (and handle with some extra code) when for example bundling your app and using tools like gulp-inline-ng2-template
此外，通过以两种不同的方式使用 css，您必须记住这一点（并处理一些额外的代码），例如在捆绑您的应用程序和使用 gulp-inline-ng2-template 之类的工具时
