如何使用 ::ng-deep 在 Angular 中为父组件设置子组件的样式？

从父级设计子组件：在 Angular 中使用 ::ng-deep

简介
在 Angular 中4、开发人员可能会面临需要从父组件更改子组件 CSS 属性的情况。这需要一种方法来穿透影子 DOM 边界并定位所需的样式。 ::ng-deep 选择器为这一挑战提供了解决方案。

使用 ::ng-deep
::ng-deep 是一个允许访问的阴影穿透选择器从父组件到子组件的样式。它是当前推荐的已弃用 /deep/ 组合器的替代方案，并且与 >>> 共享相同的别名。通过利用 ::ng-deep，父组件中应用的样式可以向下级联并影响子组件。

示例
为了说明 ::ng-deep 的用法，考虑以下代码：

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

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

在此示例中，使用 ::ng-deep 应用于 .overview 类的样式将应用于 .overview 子组件内的 p 元素班级。 &:last-child 伪类将影响该子组件中的最后一个 p 元素，删除默认的下边距。

IE11 支持
需要注意的是:: IE11 不支持 ng-deep。对于不支持 ::ng-deep 的浏览器，可以探索 Angular CLI 项目中的 ViewEncapsulation.None 和 encapsulation: "none" 等替代方法来实现类似的功能。

以上是如何使用 ::ng-deep 在 Angular 中为父组件设置子组件的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！