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

Question

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

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

对我来说,第一种方法看起来并不那么棱角分明,但同时它确实可以工作并且易于实现.

第二个需要对每个组件进行一些工作,但允许更多地控制一个人使​​用的样式.它还允许我将我的常用样式组织成较小的样式表,并仅使用所需的样式表.

你喜欢这些解决方案还是第三个更好的解决方案？:)

Answer 1

1.这个解决方案很好,但它更适合任何常见的样式,应该适用于所有组件.例如,css网格的样式.为了使它更具棱角,您可以将app app组件的封装设置为none:

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

演示可以在这里找到(plunker)

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

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

2.我喜欢这个解决方案,因为它是非常可以理解的,具有可预测的行为.但它有一个问题:

每次使用时,它都会为您的共享样式添加样式标记.如果您有大型样式文件或许多正在使用它的元素,则可能会出现问题.

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

演示可以在这里找到(plunker)

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

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

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

在这种情况下,您必须使用样式中的/ deep /来为子组件创建样式:

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

我还值得一提的是不要忘记使用:主持人只 为子元素提供样式.如果省略它,你将获得另一种全球风格.

演示可以在这里找到(plunker)

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

注意:封装样式真的很酷.但你也应该记住,没有办法限制你的深刻风格.因此,如果您应用深度样式,它将绝对适用于所有孩子,所以也要小心使用它.

Answer 2

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

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

#1 可用于应用程序所有部分所共有的非常通用的样式。但是，如果您考虑到 SPA 中的根无论如何都是角度组件 - 则没有真正需要采用除 #2 之外的另一种链接样式方法。

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