从父级设计子组件:在 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中文网其他相关文章!