如何以及在何处使用 ::ng-deep？

Question

我是 Angular 4 的新手，所以谁能解释一下在 Angular 4 中如何以及在哪里使用 ::ng-deep ？

实际上我想从父组件中覆盖子组件的一些 CSS 属性。此外，它是否支持 IE11？

谢谢您的帮助。

原文由 Jeyabalan Thavamani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常 /deep/ “shadow-piercing” 组合符可用于将样式强制降低为 child components 。这个选择器有一个别名 >>>，现在有另一个叫做 ::ng-deep。

由于 /deep/ combinator 已被弃用，建议使用 ::ng-deep

例如：

 <div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

和 css

 .overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

它将应用于子组件

原文由 Sajeetharan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

用法

::ng-deep , >>> 和 /deep/ 禁用特定CSS元素的视图封装，换句话说，它提供了对HTML元素的访问.例如，如果您使用的是 Angular Material（或任何其他类似的第三方库），一些生成的元素在您的组件区域之外（例如 dialog ）并且您无法直接访问这些元素或使用常规 CSS方法。如果你想改变这些元素的样式，你可以使用这三种东西中的一种，例如：

 ::ng-deep .mat-dialog {
  /* styles here */
}

目前 Angular 团队建议仅使用 EMULATED 视图封装进行 “深度” 操作。

弃用

“深度” 操作实际上也被 弃用 了， 但 它现在仍然有效，因为 Angular 提供预处理支持（不要急于拒绝 ::ng-deep 今天，先看看 弃用实践）。

无论如何，在采用这种方式之前，我建议您先看一下 禁用视图封装 的方法（这也不太理想，它允许您的样式泄漏到其他组件中），但在某些情况下，这是更好的方法。如果您决定禁用视图封装，强烈建议使用特定的类来避免 CSS 规则交叉，最后，避免样式表混乱。在组件的 .ts 文件中禁用它真的很容易：

 @Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

您可以在 本文 中找到有关视图封装的更多信息。

原文由 P.S. 发布，翻译遵循 CC BY-SA 4.0 许可协议