查看 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 的情况下从我的样式表中定位单个 class？或者如果有人对如何最好地解决这个问题有任何建议？

提前致谢。

Answer 1

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

在您的模板样式表中：

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

这将以您的组件中带有 class ui-resizable-handle 的任何子元素为目标，无论它是在模板中声明的、子组件还是动态添加的第三方库，因为这将编译成类似的东西：

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