Angular Component CSS 封装如何工作？答案

【问题标题】：How does Angular Component CSS encapsulation work?Angular Component CSS 封装如何工作？
【发布时间】：2020-01-14 07:15:25
【问题描述】：

我想了解如果我创建两个样式表

样式 1

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

}

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>

这是结果：

【问题讨论】：

标签： javascript css angular typescript

【解决方案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 }

你可以找到更完整的解释here和文档here

【讨论】：

【解决方案2】：

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

【讨论】：