ng-deep 影响同级组件

Posted 2023-03-06

【中文标题】ng-deep 影响同级组件

【英文标题】：ng-deep is effecting sibling components

【发布时间】：2019-09-25 04:57:05

【问题描述】：

我在使用 Angular Material Design 时遇到了一个问题，我需要使用 ng-deep 来调整手风琴的样式。但是，我在其他地方使用手风琴，它采用相同的风格。这是不希望的。

它应该这样做吗？我该如何解决？

【问题讨论】：

是的，这是 ng-deep 的假定行为。它覆盖了兄弟组件中的样式。解决这个问题的最简单方法是将您的手风琴包装在父组件的一个类中，并为该类中的手风琴提供 ng-deep。这将防止其他组件中的样式泄漏。

【参考方案1】：

我发现为了将样式限制在组件中，我不得不像这样用 :host 封装 ::ng-deep 代码：

:host 
    ::ng-deep 
        /* ... custom styles here */
    

【参考方案2】：

ng-deep 已弃用，主流浏览器的支持已被删除。您可以在Angular Docs 中了解更多信息。

我建议您改为从组件中删除视图封装（None 删除了该组件的样式封装，因此您可以定位 Angular Material 样式）。

import  ViewEncapsulation  from '@angular/core';

@Component(
    selector: 'app-example-component',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
    encapsulation: ViewEncapsulation.None
)