PrimeNG元素未设置范围，无法使用默认的Angular 2 ViewEncapsulation（模拟）设置样式

炽热的青蛙

我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？

编辑错字并澄清标题

艾哈迈德·BM

如您所见，这是由于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,
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-2

0 条评论

登录后参与评论