css - PrimeNG 元素没有作用域，不能使用默认的 Angular 2 ViewEncapsulation（模拟）设置样式

Question

styleUrls我在声明我的 Angular 2 组件以利用View Encapsulation时尝试使用该属性，但是在 Angular 完成初始化后将元素插入 DOM 时似乎存在问题。

见下文，该<p-datatable>元素有一个范围（它存在于原始标记中）但<p-paginator>没有（在事实之后被添加到 DOM）。

因此 Angular 插入的样式HEAD与我的元素不匹配：

<style>
    p-datatable[_ngcontent-xnm-4] p-paginator[_ngcontent-xnm-4]:not(:first-child) {
    display: none;
}
</style>

这是 Angular 2 中视图封装的限制，还是有办法让它按需“重新调整”DOM 的范围？

编辑错字和澄清标题

score 41 · Accepted Answer

正如您所注意到的，这是因为Shadow DOM及其提供的样式范围。您的模板仅包含p-datatable正确限定范围的，但在事实之后添加的子元素没有限定范围。为了应用您的自定义样式，您可以选择两种方法。

解决方案 1 - 特殊选择器（推荐）

我个人推荐这样做，因为您仍然可以维护视图封装（Shadow DOM）。我们仍然可以通过使用和选择器来定位使用PrimeNG的组件级模板:host/deep/

:host /deep/ .ui-paginator-bottom {
  display: none;
}

它的作用是通过子组件树强制样式向下进入所有子组件视图，因此即使p-datatable是您组件自己的模板中存在的唯一标记，该样式仍将应用，因为它是组件中的子组件DOM。

在组件级别，您可以通过将其设置为ViewEncapsulation.None来禁用视图封装

...
import { ..., ViewEncapsulation } from '@angular/core';

@Component {
...
encapsulation: ViewEncapsulation.None,
}