css - PrimeNG 元素未限定范围，无法使用默认的 Angular 2 ViewEncapsulation(模拟)设置样式

Question

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

我的情况是 PrimeNG paginator我目前无法设置样式，因为它没有被 Angular 应用范围。

请参阅下面的 <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 中 View 封装的限制，还是有办法让它按需“重新定义”DOM？

编辑错字并澄清标题

Answer 1

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

解决方案 1 - 特殊选择器(推荐)

我个人推荐这样做，因为您仍然可以保持 View 封装(Shadow DOM)。我们仍然可以定位使用 PrimeNG 的组件级模板。通过使用 :host 和 /deep/ selectors因此

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

这样做是强制样式通过子组件树向下进入所有子组件 View ，所以即使 p-datatable 是组件自己模板中唯一存在的标记，样式也会仍然会被应用，因为它是 DOM 中组件的子组件。

解决方案 2 - 禁用 View 封装

在组件级别，您可以禁用 View Encapsulation通过将其设置为 ViewEncapsulation.None

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

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