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

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

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

第一种方法看起来不那么棱角十岁上下给我，但同时它肯定工作，很容易实现。

第二个需要对每个组件进行一些工作，但允许更多地控制某个组件正在使用的样式。它还让我能够将我的通用样式组织成更小的样式表，并仅使用需要的样式表。

你喜欢这些解决方案吗？还是有更好的解决方案？ :)

来源

2016-02-29 krazimierz

有3种方式在angular2应用程序中使用样式（link）。你已经提到了那些允许你重用样式的那些。

我个人认为，对于任何大型应用程序来说，它最好与＃2一起使用，主要是由于角度提供的视图封装。

＃1可用于真正非常通用的样式，这些样式对于您的应用程序的所有部分都是通用的。但是，如果你会考虑到你的SPA中的根本就是角度分量，那么就没有必要再用另一种连接方式，而不是＃2。

而且通过两种不同的方式使用CSS，你必须记住这一点（有一些额外的代码处理）时，例如捆绑您的应用程序，并使用类似一饮而尽，直列NG2模板工具

来源

2016-02-29 16:37:25 Amid

这个解决方案很好，但它更适用于任何常见样式，这些样式应该适用于所有组件。例如，CSS网格的样式。为了使它更angularish你可以应用组件组封装为你无：

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

Demo could be found here (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 {}

Demo could be found here (plunker)

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; 
}

我还值得一提的是不要忘记使用：让主人款式可用只有为子元素。如果你忽略它，你将会获得更多的全球风格。

Demo could be found here (plunker)

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

注：风格封装是很酷的功能。但你也应该记住，没有办法限制你的深度风格。所以如果你使用了深色的款式，那么它对所有的孩子都是绝对可用的，所以你也要小心使用它。

来源

2017-01-05 17:35:01 ilyabasiuk

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

回答

相关问题