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

我是Angular 4的新手，所以谁能解释::ng-deep在Angular 4中的使用方式和位置？

实际上，我想从父组件覆盖子组件的某些CSS属性。此外，它在IE11上受支持吗？

通常， /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;
            }
        }
    }
}

它将应用于子组件

用法

::ng-deep，>>>并/deep/禁用特定CSS规则的视图封装，换句话说，它使您可以访问组件HTML中不包含的DOM元素。例如，如果您使用的是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
})

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

我会强调::ng-deep通过要求父级是封装的CSS类来将组件的子级限制为仅子级的重要性。

为此，重要的是::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;
}

编辑：

您可以通过使用:host关键字而不是创建新的CSS类来实现相同的行为。

:host ::ng-deep .mat-checkbox-layout

确保不要错过角度指南中: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只有一个。

只是更新：

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

每个文档：

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

你可以在这里找到

请谨慎使用:: ng-deep。我在整个应用程序中都使用它，将材质设计工具栏颜色设置为整个应用程序中的不同颜色，只是发现当应用程序正在测试工具栏颜色时，它们会相互叠加。找出原因是这些样式已成为全局样式，请参见本文。 这是一个有效的代码解决方案，不会渗入其他组件。

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}