Question

我是Angular 4的新手，所以有人可以解释Angular 4中::ng-deep的使用方法和位置吗？

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

Answer 1

通常 /deep/ “shadow-piercing” 组合器可用于强制将样式强制为 child components 。此选择器的别名为＆gt;＆gt;＆gt;现在有另一个名为:: 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。

更新

“深度”操作实际上也已弃用，在遵循这种方式之前，我建议您先看看禁用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

只需更新：

您应该使用::ng-deep代替似乎已不推荐使用的/deep/。

每个文档：

不推荐使用穿刺后代组合器，并且支持从主要的浏览器和工具中删除。因此，我们计划放弃在Angular中支持（针对/ deep /，>>>和:: ng-deep的全部3种）。直到那么:: ng-deep应该是首选，以便与工具。

您可以找到它here

Answer 5

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

为此，重要的是在父级之后使用::ng-deep，而不是在父级之后使用.my-component ::ng-deep .mat-checkbox-layout { background-color: aqua; }，否则它将在加载组件时应用于所有具有相同名称的类。

组件CSS：

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

组件模板：

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

产生的CSS：

filterPredicate

Answer 6

请谨慎使用:: ng-deep。我在整个应用程序中都使用它，将材质设计工具栏颜色设置为整个应用程序中的不同颜色，结果是发现应用程序在测试工具栏颜色时会相互叠加。最好改用javascript（我知道不好玩）。

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

}

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

6 个答案:

更新