如何关闭Angular 2中一个属性的视图封装？

Question

我有以下样式：

#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进入路由器插座。我想从#right_content开始设置register.css的样式。

有没有办法可以关闭视图封装（或者调用添加_ngcontent-mxo-3属性的任何内容），只是针对上述样式？

Answer 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">