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

Question

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

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

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

以角度 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;
}