Css Angular 2应用程序中组件间的共享样式

我的Angular 2应用程序中有一些CSS规则，这些规则在各种组件中都很常见。显然，我不想将它们复制粘贴到每个组件的样式中。我目前有两个想法：

在静态CSS文件中放置公共CSS规则，并使用my index.html的

head

部分中的链接将其包括在内

将我的通用CSS规则放在一个或多个文件中，并将它们包含在每个组件的

@Component

装饰器中，例如。

styleURL:['./myComponentStyle.css'，'../common/common.css']

第一种方法在我看来并不是那么狭隘，但同时它肯定能工作并且易于实现

第二种方法需要对每个组件做一些工作，但允许对每个组件使用的样式进行更多的控制。它还允许我将常用样式组织成更小的样式表，并只使用需要的样式表

---

您赞成这些解决方案中的任何一种，还是有第三种更好的解决方案？：）

在angular2应用程序（）中有3种使用样式的方法。 您已经提到了其中两种允许重用样式的方法

我个人的观点是，对于任何大型应用程序，最好使用#2，这主要是因为angular提供了视图封装

#1可用于应用程序所有部分通用的非常通用的样式。但是，如果你考虑到SPA中的根无论如何都是角度分量，那么就没有必要使用除#2之外的另一种链接样式的方法

---

此外，通过以两种不同的方式使用css，您必须记住这一点（并处理一些额外的代码），例如捆绑应用程序和使用gulp-inline-ng2-template之类的工具。

1。这种解决方案很好，但它更适合任何通用样式，应该适用于所有组件。例如，css网格的样式。 要使其更具棱角感，您可以将应用程序组件的封装设置为“无”：

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

注意：通过这种方式包含的样式（仅添加样式标记，或使用非封装）将影响页面上的所有元素。有时候，这是我们真正想要的（同意在项目中使用任何css框架）。但是，如果只是想在几个组件之间共享样式，这可能不是最好的方法

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

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

每次使用时，它都会添加带有共享样式的样式标记。 如果您有一个大的样式文件，或者有许多元素正在使用它，那么这可能是一个问题

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

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

我还值得一提的是不要忘记使用：host使样式仅可用于子元素。如果您省略它，您将获得一个更多的全局样式

---

---

注意：样式封装是一个非常酷的特性。但你也应该记住，没有办法限制你的深度风格。所以，如果你应用了深度样式，它将绝对适用于所有的孩子，所以也要小心使用

对于未来的读者，我认为这个解决方案是最好的

让我们假设您有两个组件（产品和客户），并且有要共享的通用样式

1.再创建一个组件

//customer-products-styles.component.ts
@组成部分({
选择器：“应用程序客户产品样式”，
模板：“”，
样式URL:[“/customer products styles.component.scss”]，
封装：视图封装。无，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类CustomerProductsStylesComponent{}

2.像这样使用它

嘿，回答得好！关于#3，我已经读到
：host
和
/deep/
将被弃用？那么从长远来看，使用#3是否仍然可持续？这不是一个容易的问题。你可以阅读这个答案来获得更多的理解，deep到底是怎么回事：我喜欢第二个解决方案。
 Summary:
 (+) easy to use
 (+) encapsulation
 (-) duplicates styles for every usage

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

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

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

//customer-products-styles.component.scss
app-products,
app-customers {
  p {
    color: coral;
  }
}