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

Question

我是Angular 4的新手，所以有人可以解释在Angular 4中如何以及在哪里使用::ng-deep？

实际上我想从父组件覆盖子组件的一些CSS属性。 IE11还支持吗？

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;
            }
        }
    }
}

它将应用于子组件

Answer 2

::ng-deep，>>>和/deep/允许您访问DOM元素，这些元素不在组件的HTML中。例如，如果您正在使用Angular Material，则某些元素由组件区域之外的Angular Material生成（例如dialog），并且您无法使用常规CSS方式访问这些元素。如果要更改这些元素的样式，则必须使用以下三种方法之一，例如：

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

目前>>>和/deep/已被弃用，因此最好使用::ng-deep。

UPDATE

“深度”操作实际上也已被弃用，在遵循这种方式之前，我建议你先看看禁用CSS封装方法（这也不太理想）并决定哪种方式更适合你的情况。如果你决定禁用封装，它很容易实现：

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

你可以在this文章中找到更多信息。

Answer 3

请确保不要错过角度指南中:host-context正上方的::ng-deep的解释：https://angular.io/guide/component-styles。免责声明：我一直想念它，希望我早点见到它。

当你没有编写组件并且无法访问其源代码时，::ng-deep通常是必需的，但是当你这样做时，:host-context可能是一个非常有用的选项。

例如，我在我设计的组件中有一个黑色<h1>标头，我希望能够在黑暗的主题背景上显示时将其更改为白色。

如果我无法访问源代码，我可能必须在父代的css中执行此操作：

.theme-dark widget-box ::ng-deep h1 { color: white; }

但是使用:host-context，您可以在组件内执行此操作。

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

这将在.theme-dark的组件链中的任何位置查找，如果找到则将css应用于h1。这是一个很好的选择，过分依赖::ng-deep虽然经常需要一些反模式。

在这种情况下，&被h1取代（这就是sass / scss的工作方式）所以你可以将你的'正常'和主题/替代css定义在彼此旁边，非常方便。

小心得到正确数量的:。对于::ng-deep，有两个，而:host-context只有一个。

Answer 4

我要强调通过要求父级是封装的css类来限制::ng-deep到组件的子级的重要性。

为了实现这一点，在父节点之后使用::ng-deep非常重要，否则在组件加载的那一刻它将适用于所有具有相同名称的类。

组件css：

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

组件模板：

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

---

结果css：

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

Answer 5

只是一个更新：

您应该使用::ng-deep而不是/deep/，这似乎已被弃用。

有关文件：

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于/ deep /，>>>和:: ng-deep的所有3个）。在此之前:: ng-deep应该是首选，以便与工具更广泛地兼容。

你可以找到它here