角度值 css _nghost-c0

【问题标题】：Values css _nghost-c0 in angular角度值 css _nghost-c0
【发布时间】：2021-03-15 18:46:00
【问题描述】：

我正在学习 Angular 5，我看到带有 ng 生成属性的 html 标记：_nghost-c0、_nghost-c1...

什么意思？

[_nghost-c3] .employees[_ngcontent-c3] button[_ngcontent-c3] {
 color: #681f32;
}

【问题讨论】：

这是 Angular 的视图封装方式。每个组件都有自己的唯一标签，并且该标签被添加到组件样式的 CSS 选择器中。这样组件样式就不会修改其他组件。它也可能用于许多其他原因。
查看这篇文章dzone.com/articles/what-is-viewencapsulation-in-angular

【解决方案1】：

这称为模拟阴影 DOM。这些是 Angular 用来将组件样式相互隔离的属性。

解释一下，让app.component.html这样

<header>
  <span>from App Component</span>
</header>

<app-alert></app-alert>

app.component.css

header span {
    color: red;
}

在 alert.component.html

<header>
    <span>from alert component</span>
</header>

alert.component.css

header span {
    color: blue;
}

【讨论】：