Angular 查看与外部库的封装

Question

我在我的组件中使用了一个外部组件。我想在这个外部组件上做一些样式。由于 Angular 查看封装，我在我的组件中定义的所有 css 都不会传播到我的 html 模板中使用的这个外部组件。为了启用这种传播，我设置了

encapsulation: ViewEncapsulation.None

行得通。但是随后我的 css 应用于我的整个项目，而不是仅应用于特定组件。我需要的是以某种方式告诉 Angular：“将此 css 应用于此组件及其所有子组件，以及外部组件”。这可能吗？

Answer 1

您可以在 css 中定义它。但是，请小心，因为 ::ng-deep 是一个非常强大的组合器，如果使用不当可能会导致问题。同样来自 Angular 网站：

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular.

CSS:

 :host { color: red; }
 
 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }

HTML:

  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>

Angular 查看与外部库的封装

Angular view encapsulation with external libraries

angular2viewencapsulation

angular