Angular Component CSS 封装是如何工作的？

Question

我想明白，如果我创建两个样式表

款式一

.heading {

  color: green;

}

款式2

.heading {

  color: blue;

}

现在，如果这两种样式写在两个不同的视图中，当在布局上将它们渲染为Partial View 时，那么在这种情况下可能会发生冲突并且一个可能会覆盖另一个的样式。

但

使用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() {}

}

用户项.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() {}

}

用户.css

.heading{ color :blue}

在页面上呈现此内容时：

<app-user></app-user>

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

这是结果：

Answer 1

Angular（默认情况下）模拟shadow 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 }您可以在此处找到更完整的解释，并在此处找到文档

Answer 2

Angular 带有开箱即用的 CSS 封装。生成新项目时，默认是项目根目录下的styles.css文件全局应用到应用中，组件样式，比如foo.component.css中的样式，只应用到应用中foo 组件，没有其他地方。但这并不是在 Angular 中封装样式的唯一方式，让我们仔细看看。@Component({&nbsp;selector: 'app-foo',&nbsp;templateUrl: './foo.component.html',&nbsp;styleUrls: ['./foo.component.css']})