Angular Component CSS封裝如何工作？

Question

我想了解如果我創建兩個樣式表

風格1

.heading {
  color: green;
}

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

}

用戶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>

這是結果：

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({ selector: 'app-foo', templateUrl: './foo.component.html', styleUrls: ['./foo.component.css'] })