查看 Encapsulation Emulated，是否可以在样式表中转义模拟封装？

Question

我有一种情况，我正在使用 jQuery 插件来调整 div 的大小。使用模拟视图封装时，此元素未获取样式表中样式的属性前缀以作为目标。这是有道理的，因为我在没有 Angular 知识的情况下修改 DOM（我知道这不是最佳实践）。

从插件创建的元素 - 没有属性

<div class="ui-resizable-handle ui-resizable-e custom-pointer" style="z-index: 90;"></div>

在 Angular HTML 中定义的元素 - 带有属性

<div _ngcontent-fav-c294 class="inner-container"></div>

我更愿意继续对这个组件中的所有其他内容使用 Emulated ViewEncapsulation，以防止任何样式泄漏。

我想知道是否可以在没有 ViewEncapsulation 的情况下从我的样式表中定位单个类？或者如果有人对如何最好地解决这个问题有任何建议？

提前致谢。

Answer 1

这就是（已弃用的）::ng-deep 发挥作用的地方：

在您的模板样式表中：

:host ::ng-deep .ui-resizable-handle {
  background-color: pink;
}

这将针对来自您的组件的任何具有类ui-resizable-handle 的子元素，无论它是在模板中声明的、子组件还是通过第三方库动态添加的，因为这将编译为：

[_nghost-fav-c294] .ui-resizable-handle {
  background-color: pink;
}