style.scss“global”到特定模块

Question

随着我的Angular 5应用程序的增长，我开始将某些类似的component移动到他们自己的module中。

我现在的问题是：是否有可能有一个类似于全局style.scss的文件，但是范围限于一个特定的module（而不是整个应用程序）？

即。文件 style-mymodule.scss ，将其样式应用于模块component内的所有mymodule（但不适用于任何其他模块）？

Answer 1

以下是一些选项，在没有任何妥协的情况下，这些选项都不会仅对您的模块起作用：

选项1：SCSS @import

使用SCSS @import导入该模块中所有组件样式表中的style-mymodule.scss。

选项2：@Component styleUrls

@Component装饰器的styleUrls属性采用数组。您可以在那里添加style-mymodule.scss。

选项3：angular-cli.json styles

将style-mymodule.scss添加到angular-cli.json中的全局样式表。在style-mymodule.scss中，在父类中添加所有样式：

.mymodule {
  // add all the module styles here.
}

然后在所有模块组件中使用@Component中的host属性：

@Component({
  ...
  host: {'class': 'mymodule'}
  ...
})

请注意，由于这不是动态类，因此我使用host属性来代替使用`@HostBinding作为动态类的常用方法。