Angular组件CSS封装是如何工作的？

Question

我想了解一下，如果我创建了两个样式表，该怎么做。 样式表1

.heading {
  color: green;
}

Style 2

.heading {
  color: blue;
}

如果这两种样式在两个不同的视图中编写，当将它们呈现为局部视图时，可能会发生冲突，并且其中一种样式可能会覆盖另一种样式。

但是，使用Angular（参见第16页），为什么这两种不同组件中的样式可以在同一页上呈现并具有封装性？为什么CSS没有被覆盖？

例如：

import { Component } from '@angular/core';

@Component({
 selector: 'app-user-item',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user-item.css

.heading{ color :green}

app-user.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'app-user',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user.css

.heading{ color :blue}

在页面上呈现时：

<app-user></app-user>
<app-user-item></app-user-item>

这是结果：

- TAHA SULTAN TEMURI

Answer 1

Angular（默认情况下）模拟了影子DOM。

它动态地创建了一些HTML属性，这些属性仅适用于该组件中的元素。

例如：

<app-user></app-user>
<app-user-item></app-user-item>

将被转换为

<app-user _ngcontent-1></app-user>
<app-user-item _ngcontent-2></app-user-item>

您的CSS将被转换为：

.heading[_ngcontent-1] { color: blue }
.heading[_ngcontent-2] { color: green }

关于 Shadow DOM 在 Angular 2 中的使用，可以在这里找到更全面的解释，文档则在这里。

- Gustavo Lopes

Answer 2

Angular自带CSS封装功能。当生成一个新项目时，默认情况下styles.css文件位于项目根目录，会全局应用到整个应用程序；而组件样式，例如在foo.component.css中找到的样式，只会应用到foo组件，不会影响其他地方。但这并不是在Angular中封装样式的唯一方式，让我们仔细看看。@Component({ selector: 'app-foo', templateUrl: './foo.component.html', styleUrls: ['./foo.component.css'] })

- Sudhanshu Pal