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

问题描述

我有以下样式:

#right_content {
  padding: 30px 40px !important;
}

我将其存储在文件register.css中，该文件绑定到我的register.ts.

I store this inside a file register.css, which is bound to my register.ts.

问题在于<div id="right_content">位于父模块中，这意味着我无法直接从register.ts内部修改其CSS属性.

The problem is that <div id="right_content"> is located in a parent module, which means I can't directly modify its CSS properties from within register.ts.

<div id="right_content">
  <router-outlet></router-outlet>
</div>

我的register.html和register.css进入路由器插座.我想从register.css设置#right_content的样式.

My register.html and register.css goes into the router outlet. I want to style the #right_content from register.css.

是否仅出于上述样式就可以关闭视图封装(或称为_ngcontent-mxo-3属性的添加方式)?

Is there any way I can turn off view encapsulation (or whatever the adding of the _ngcontent-mxo-3 attributes is called), just for the above styles?

推荐答案

更新

::slotted，并且可以与`ViewEncapsulation.ShadowDom

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/zh-美国/docs/Web/CSS/::开槽

原始

即使ViewEncapsulation为Emulated(默认值)，也支持创建跨越组件边界的选择器

It is supported to create selectors that go through component boundaries even when ViewEncapsulation is Emulated (default)

child-component ::ng-deep #right_content {
  padding: 30px 40px !important;
}

允许平铺任何祖先的<xxx id="right_content">

这篇关于如何在Angular 2中关闭一个属性的视图封装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！