Angular2+中组件之间的样式

使用 Angular 2+，组件样式受到保护，默认情况下不会渗入其他组件。这要归功于带有 Shadow DOM 或 Shadow DOM 仿真的视图封装。但是仍然有一些方法可以玩弄并让组件的样式与它周围的环境交互 :host, :host-context 和 /deep/（现在 [ X173X]::ng-deep）。还有一种方法可以改变视图封装的行为：

：主持人

您可以使用特殊的 :host 伪类选择器在宿主组件的模板中应用样式，该模板是当前组件的父组件：

:host {
  background-color: #545454;
  color: white;
  font-size: 1.5em;
}

使用 :host(selector) 指定选择器以应用仅存在于主机组件中的选择器的样式。在此示例中，仅当主机具有 .dark 类时才应用样式：

:host(.dark) {
  background-color: #545454;
  color: white;
  font-size: 1.5em;
}

：主机上下文

使用 :host-context 您可以根据组件树中位于其自身之上的任何组件或 html 元素的条件将样式应用于当前组件。一个常见的用例是应用样式，例如，如果某个类存在于 body 元素上。这对于主题化非常有用。

在以下示例中，只有在上游某处找到 .deep-purple 时，具有类 .info 的 span 元素才会被设置样式：

:host-context(.deep-purple) span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

::ng-深

使用 ::ng-deep，样式将应用于当前组件，但也会向下渗透到组件树中当前组件的子组件。

在 Angular 4.3 之前，使用 /deep/ 或 >>> 代替 ::ng-deep。浏览器已弃用这两种表示法，因此 ::ng-deep 现在是临时解决方法。

在以下示例中 span.info 在当前组件及其子组件中具有 be 样式：

::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

所有这些伪类也可以组合起来以获得最大的控制：

:host-context(.deep-purple) ::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

查看封装

视图封装可以在组件的装饰器中设置为 Native、Emulated（默认）或 None，如下所示：

@Component({
  selector: 'my-app',
  ...,
  encapsulation: ViewEncapsulation.None
})

Native 使用浏览器的原生 Shadow DOM 功能。对于本机支持，浏览器支持仍然非常有限。
Emulated 是默认行为并使用模拟的 Shadow DOM。现在最合适了，因为大多数常用浏览器不支持 Shadow DOM。
None 不应用任何视图封装，并且应用于一个组件的样式也会对整个应用程序产生全局影响。