Angular 2应用程序中的组件共享样式
我的Angular 2应用程序中有一些CSS规则,这些规则在各种组件中都很常见。很明显,我不想复制&将它们粘贴到每个组件的样式中。我现在有2个想法:Angular 2应用程序中的组件共享样式
- 将共同CSS规则的静态CSS文件,包括它用我的index.html的
head
部分的链接。 - 将我的常用CSS规则放在一个或多个文件中,并将它们包含在每个组件的装饰器中,例如
@Component
。styleUrls: [ './myComponentStyle.css', '../common/common.css']
第一种方法看起来不那么棱角十岁上下给我,但同时它肯定工作,很容易实现。
第二个需要对每个组件进行一些工作,但允许更多地控制某个组件正在使用的样式。它还让我能够将我的通用样式组织成更小的样式表,并仅使用需要的样式表。
你喜欢这些解决方案吗?还是有更好的解决方案? :)
有3种方式在angular2应用程序中使用样式(link)。 你已经提到了那些允许你重用样式的那些。
我个人认为,对于任何大型应用程序来说,它最好与#2一起使用,主要是由于角度提供的视图封装。
#1可用于真正非常通用的样式,这些样式对于您的应用程序的所有部分都是通用的。但是,如果你会考虑到你的SPA中的根本就是角度分量,那么就没有必要再用另一种连接方式,而不是#2。
而且通过两种不同的方式使用CSS,你必须记住这一点(有一些额外的代码处理)时,例如捆绑您的应用程序,并使用类似一饮而尽,直列NG2模板工具
这个解决方案很好,但它更适用于任何常见样式,这些样式应该适用于所有组件。例如,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
注:风格封装是很酷的功能。但你也应该记住,没有办法限制你的深度风格。所以如果你使用了深色的款式,那么它对所有的孩子都是绝对可用的,所以你也要小心使用它。