首页 文章

组件样式不适用于模拟视图封装（Angular 5）

提问于
浏览 次
2

我在Angular 5应用程序中使用PrimeNG库（https://www.primefaces.org/primeng），我意识到，如果我使用 ViewEncapsulation.Emulated 在Angular组件中使用它的一些控件，我无法向它们应用任何自定义样式 .

例如，我在组件中使用 p-checkbox 控件，我的样式文件中有以下（可怕的）CSS规则：

th {
  background-color: olive !important;
}

.ui-chkbox {
  background-color: aqua !important;
  height: 2.5rem !important;
}

注意： ui-chkbox 是包含复选框的DIV .

如果我设置 encapsulation: ViewEncapsulation.None ，它的外观如下：

enter image description here

如果我改为 encapsulation: ViewEncapsulation.Emulated ，它看起来像：

enter image description here

如您所见，组件 th 标记仍在设置样式，但复选框组件不是 . 我认为模拟视图封装是为了组件样式，因此它们不会与外部定义的其他类型冲突，但它似乎也会影响内部组件 .

有人能解释一下这种行为吗？我已经阅读了几个封装教程，但我找不到原因 .

谢谢！

angular

2 回答

  • 0

    如果不使用 ViewEncapsulation.None ，则无法更改primeng组件样式 .

    @Component元数据中指定的样式仅适用于该组件的模板 . 嵌套在模板中的任何组件或投影到组件中的任何内容都不会继承它们 .

    您只能定位每个子组件的host元素 . 您将无法定位组件内使用的任何内部元素 .

    Style scope

    回复于
  • -1

    如果您需要，您仍然可以使用已弃用的 ::ng-deep 来定位任何子组件：

    :host ::ng-deep .ui-chkbox {
  background-color: aqua !important;
  height: 2.5rem !important;
}

    组件样式通常仅适用于组件自己的模板中的HTML . 使用/ deep / shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中 . / deep / combinator适用于任何深度的嵌套组件，它适用于视图子节点和组件的内容子节点 .

    有关更多信息，请参阅https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep .

    不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持 . 因此，我们计划放弃Angular中的支持（对于/ deep /，>>>和:: ng-deep的所有3个） . 在此之前:: ng-deep应该是首选，以便与工具更广泛地兼容 .

    回复于

相关问题