首页 文章

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

提问于
浏览 次
26

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

  • 将常用CSS规则放在静态CSS文件中，并使用index.html的 head 部分中的链接将其包含在内 .

  • 将我的常用CSS规则放在一个或多个文件中，并将它们包含在每个组件的 @Component decorator中，例如 styleUrls: [ './myComponentStyle.css', '../common/common.css']

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

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

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

angular typescript

2 回答

  • 1

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

    `@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. 我喜欢这个解决方案，因为它非常容易理解且具有可预测的行为 . But there is one problem with it ：

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

    duplicated styles 

    @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. 您还可以使用另一个选项 . 只需再创建一个组件，为其子项提供共享样式 .

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

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

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

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

    Demo could be found here (plunker)

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

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

    回复于
  • 28

    在angular2 app（link）中有3种方式可以使用样式 . 您已经提到了其中两个允许您重用样式的内容 .

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

    ＃1可用于应用程序所有部分通用的非常通用的样式 . 但是如果你考虑到你的SPA中的根仍然是角度分量 - 没有必要采用另一种链接样式而不是＃2的方法 .

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

    回复于

相关问题