如何在 Angular 2 中关闭一个属性的视图封装？
Posted
技术标签:
【中文标题】如何在 Angular 2 中关闭一个属性的视图封装？【英文标题】：How to turn off view encapsulation for one property in Angular 2? 【发布时间】：2016-08-30 19:38:36 【问题描述】：我有以下样式：
#right_content
padding: 30px 40px !important;
我将其存储在文件register.css 中，该文件绑定到我的register.ts。
问题是<div id="right_content"> 位于父模块中，这意味着我不能直接从register.ts 中修改它的CSS 属性。
<div id="right_content">
<router-outlet></router-outlet>
</div>
我的register.html 和register.css 进入路由器插座。我想为register.css 设置#right_content 的样式。
有什么方法可以关闭视图封装（或任何添加 _ngcontent-mxo-3 属性的方法），仅针对上述样式？
【问题讨论】：
当您想为孩子设置父母的样式或我误解了您的问题时，视图封装对您没有帮助。您能否添加更多代码来演示您想要设置样式的样式和元素之间的关系？ @GünterZöchbauer#right_content 位于父组件中，因此我现在无法更改子组件中 CSS 的样式，仅仅是因为它为我的 CSS 添加了一个属性。跨度>
这对我没有帮助。请添加更多代码，这是使事情变得清晰的最简单方法。我会添加一个答案，但这只是一个疯狂的猜测，因为我不完全理解这个问题。
@GünterZöchbauer 请检查我的更新，看看是否更有意义。
所以你实际上想要从一个孩子设计一个父母。只是不支持。您只能根据自己或祖先设置组件的样式，但不能根据子项或其他后代设置祖先的样式。我能想到的唯一方法是强制向<head> 添加样式。
【参考方案1】：
更新
::slotted 现在被所有新浏览器支持并且可以与 `ViewEncapsulation.ShadowDom 一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
原创
即使ViewEncapsulation 是Emulated（默认），也支持创建穿过组件边界的选择器
child-component ::ng-deep #right_content
padding: 30px 40px !important;
允许平铺来自任何祖先的<xxx id="right_content">
【讨论】：
>>> 和 /deep/ are deprecated. ?
使用::ng-deep
That's supposedly going away, too: "穿透阴影的后代组合器已被弃用，support is being removed from major browsers 和工具。因此，我们计划放弃对 Angular 的支持（对于所有 3 个/deep/、@987654334 @ 和 ::ng-deep)。在此之前，应该首选 ::ng-deep，以便与这些工具有更广泛的兼容性。"
当所有浏览器都原生支持样式封装并且 Angular 放弃 ViewEncapsulation.Emulated 这是目前的默认值，因此不太可能很快消失时，它就会消失，-)
与>>> 和/deep/ 相同，但SASS 仅支持::ng-deep，这就是我现在建议这样做的原因。以上是关于如何在 Angular 2 中关闭一个属性的视图封装？的主要内容，如果未能解决你的问题，请参考以下文章