Question

我很好奇CSS文件如何通过角度应用程序传播。我在最高级别有我的src文件夹，其中包括styles.css。我知道那里定义的样式适用于整个应用程序。在那下面是app文件夹，它有app.component.css。它有两个子组件，alpha.component和beta.component，每个子组件都在自己的文件夹中（分别为alpha和beta）。 alpha有gamma和delta子文件夹，每个子文件夹都有自己的组件用css，html和ts文件定义。如果我在alpha.component.css中定义一个类，并在gamma.component.html中使用该类，那么alpha.component.css中的规则是否适用于我的类的那些实例？同样，如果在app.component.css中定义了一个类，它是否会应用于应用程序中的所有html文件？

Answer 1

我们在css文件中定义的哪种样式只会应用于它们所属的组件。这在Angular中称为View Encapsulation。

当你检查元素时，你可以看到像.my-nav[_ngcontent-c0]这样的奇怪标签是由angular添加的，这对每个组件类都是唯一的。这就是角度如何知道应用哪种风格。您可以通过

覆盖此功能

@Component({
  selector: 'app-xxx',
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.css'],
  encapsulation: ViewEncapsulation.None
 })

ViewEncapsulation.None需要从核心
导入

styles.css文件夹中的全局src文件将应用于整个项目。此行为与应用程序的文件夹结构无关。全局样式添加在.angular-cli.json

下的styles文件中

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/material-design-icons/iconfont/material-icons.css",
    "styles.css"
  ]

你可以看到我已经添加了我的全局css last，它具有更高的优先级。

应用程序中css定义文件之间的css类的层次结构和继承

1 个答案: