首页 文章

PrimeNG元素没有作用域，无法使用默认的Angular 2 ViewEncapsulation（模拟）进行样式化

提问于
浏览 次
12

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

我的情况是PrimeNG paginator，我目前可以通过Angular应用范围 .

请参见下文 <p-datatable> 元素有一个范围（它存在于原始标记中）但 <p-paginator> 没有（事后已添加到DOM） .

enter image description here

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

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

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

编辑错字和澄清 Headers

css angular primeng

1 回答

  • 37

    正如您所注意到的那样，这是因为Shadow DOM和它提供的样式范围 . 您的模板仅包含正确获取作用域的 p-datatable ，但在事实之后添加的子元素不是作用域的 . 要应用自定义样式，您可以选择两种方法 .

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

    我个人推荐这个，因为你仍然可以维护视图封装（Shadow DOM） . 我们仍然可以使用 :host 和 /deep/ selectors来定位使用PrimeNG的组件级模板

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

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

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

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

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

@Component {
...
encapsulation: ViewEncapsulation.None,
}
    回复于

相关问题