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

Question

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

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

Answer 1

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

为此，重要的是::ng-deep在父级之后使用，而不是之前，否则它将应用于加载组件时具有相同名称的所有类。

使用:host关键字 before::ng-deep将自动处理：

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

或者，您可以通过在::ng-deep关键字之前添加组件范围的 CSS 类来实现相同的行为：

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

组件模板：

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

生成的（Angular 生成的）css 将包含唯一生成的名称并仅应用于其自己的组件实例：

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

Answer 2

通常, /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 3

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

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

现在.ts和::ng-deep被弃用,因此,更好的利用>>>.

Answer 4

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