PrimeNG元素没有作用域,无法使用默认Angular 2 ViewEncapsulation(模拟)进行样式设置

Question

我styleUrls在声明我的Angular 2组件时尝试使用该属性来利用View Encapsulation,但是当Angular完成初始化之后元素被插入DOM时似乎存在问题.

我的情况是PrimeNG分页符,我目前无法设置样式,因为它没有被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中视图封装的限制还是有办法让它按需"重新调整"DOM？

编辑错字和澄清标题

Answer 1

正如您所注意到的,这是因为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,
}