PrimeNG 元素未限定范围，无法使用默认设置样式 Angular 2 ViewEncapsulation（仿真）

PrimeNG Element not scoped, can't be styled with default Angular 2 ViewEncapsulation (Emulated)

我在声明我的 Angular 2 组件以利用 View Encapsulation 时尝试使用 styleUrls 属性 但是当元素出现时似乎有问题在 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 中视图封装的限制，还是有办法让 "re-scope" 按需 DOM？

已编辑拼写错误并澄清标题

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

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

我个人推荐这个，因为你仍然可以保持视图封装（Shadow DOM）。我们仍然可以定位使用 PrimeNG by using the :host and /deep/ selectors 的组件级模板 

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

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

中组件的子项

解决方案 2 - 禁用视图封装

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

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

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