浅谈Angular中组件样式的工作原理

在开发 Angular 组件的过程中,我们习惯把组件的样式写在对应的 css 文件中,但是一直不了解 Angular 是怎样做到样式隔离的,比如在 A 组件中写了 h1 { color: red },这个样式只会在 A 组件中生效,而不会影响到其他的组件。为了探究原理,就有了这篇文章,以下内容基于 Angular CLI 10.1.1 版本创建。

组件样式工作原理
探索
首先用 Angular CLI 创建一个新的 Angular 项目,删除 app.component.html 中的所有内容,替换成如下内容:

1

2

App Component

Button

在 app.component.css 中添加如下内容:

1

2

3

.red-button {

color: red;

}

运行时有如下 html 代码:

1

2

3

4

App component

Button

可以看到在在 app-root 元素上有一个名为 _nghost-ydo-c11 的属性(property),app-root 里面的两个元素都有一个名为 _ngcontent-ydo-c11 的属性。

那么这些属性是用来做什么的呢?

为了更好的理解,我们先创建一个独立的组件,新建文件 blue-button.component.ts,内容如下:

1

2

3

4

5

6

7

8

9

你可能感兴趣的:(web前端,编程程序,IT行业)