Angular ViewEncapulation.None子级不从父级获取样式

我正在将一些Angular 4代码重构为Angular 7。到目前为止还不错

我有这个配置的组件

ConfigMenu

@Component({
  selector: 'app-config-menu',
  templateUrl: './config-menu.component.html',
  styleUrls: ['./config-menu.component.scss']
})

因为它有很多可以分开的项目，所以我做了一个子组件

GeneralOptions

@Component({
  selector: 'app-general-options',
  templateUrl: './general-options.component.html',
  styleUrls: ['./general-options.component.scss'],
  encapsulation: ViewEncapsulation.None
})

旁注：我知道我会继续做。马上按

我的问题是，来自父组件的

CSS

没有应用到子组件

例如，我有：

.list {
   margin-bottom: 0.7rem;
   margin-top: 0;
   padding-top: 0;
}

转化为：

.list[_ngcontent-c1] {
    margin-bottom: 0.7rem;
    margin-top: 0;
    padding-top: 0;
}

但是我的

.list

项目在

应用程序常规选项.html

中没有

[\u ngcontent-c1]

属性，因此没有应用任何样式

---

据我所知。如果我设置了

ViewEncaptulation.None

它应该会得到上面的所有样式。我做错了什么吗？

这是一个常见的误解，即视图封装。没有一个错误并不意味着你的组件可以自由地被所有应用程序穿透，相反，你的组件可以穿透整个应用程序

如果将ViewEncap None添加到父组件，它将执行所需的操作

如果这会产生冲突，Workaround可能会在css中的每个类后面使用：：ng deep

：：ng deep.list{…}

它将穿透封装。或者简单地将父级的整个css包含在

：：ng deep:host{..your css..}

---

希望这有帮助

我做了一个子组件GeneralOptions，它有一个子组件GeneralOptions

？正确吗？当你说我的组件用

穿透我的所有应用程序时。无

这意味着如果我的组件中有一个类似

div{background:red}

的东西，我的all中的所有

div

都会有一个红色背景？我回答自己：是的。