[英]View Encapsulation Emulated, is it possible to escape emulated encapsulation within a stylesheet?
I have a situation where i am using a jQuery plugin to resize a div
.我有一种情况,我使用 jQuery 插件来调整div
大小。 When using emulated view encapsulation this element is not getting the attribute prefix for the style in my stylesheet to target.使用模拟视图封装时,此元素未获取要定位的样式表中样式的属性前缀。 This makes sense because i am modifying the DOM without angular's knowledge (which i know is not best practice).这是有道理的,因为我在没有 angular 知识的情况下修改 DOM(我知道这不是最佳实践)。
Element created from plugin - without attribute从插件创建的元素 - 没有属性
<div class="ui-resizable-handle ui-resizable-e custom-pointer" style="z-index: 90;"></div>
Element defined in angular HTML - with attribute在 Angular HTML 中定义的元素 - 带有属性
<div _ngcontent-fav-c294 class="inner-container"></div>
I would prefer to keep using Emulated ViewEncapsulation for everything else in this component to prevent any style's leaking.我更愿意继续使用 Emulated ViewEncapsulation 来处理此组件中的所有其他内容,以防止任何样式泄漏。
I was wondering if there is anyway for me to target a single class from my stylesheet without ViewEncapsulation?我想知道我是否可以在没有 ViewEncapsulation 的情况下从我的样式表中定位单个类? Or if anyone has any suggestions for how best to tackle this?或者如果有人对如何最好地解决这个问题有任何建议?
Thanks in advance.提前致谢。
This is where the (deprecated) ::ng-deep
comes in play:这是(已弃用的) ::ng-deep
发挥作用的地方:
In your templates stylesheet:在您的模板样式表中:
:host ::ng-deep .ui-resizable-handle {
background-color: pink;
}
This will target any child element with the class ui-resizable-handle
from your component, regardless if it's declared in the template, a child component or dynamically added with a third party library, because this will compile to something like:这将针对您的组件中具有ui-resizable-handle
类的任何子元素,无论它是在模板中声明的、子组件还是使用第三方库动态添加的,因为这将编译为以下内容:
[_nghost-fav-c294] .ui-resizable-handle {
background-color: pink;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.