问题描述
我们的很多网站都是这样构建的：
- 组件
- 组件 CSS
- 组件模板
- 子组件
我们经常需要根据子组件所在的父组件设置不同的样式。当然，这很烦人，但是当我们使用全局 CSS 时是可以管理的，因为我们可以简单地使用唯一 ID 和类来定位特定实例CSS 选择器。
我们现在正试图停止使用全局样式并在每个组件中封装我们的 CSS。这样做的问题是，据我所知，封装 angular CSS 将限制您的 CSS，使其仅适用于该组件......这意味着它也不适用于任何子组件。
一种解决方案似乎是在我们的组件 CSS 中使用 ::ng-deep 选择器来定位孩子。不过，这遇到了一些阻力，因为我被告知这通常也会破坏封装，并可能影响网站的其他部分的不同组件。
这就是我困惑的地方。一些问题：
是否有任何以 ::ng-deep 为目标的样式被分解为全局应用程序范围？或者它只是该父组件中的“全局”？
如果是前者，仍然使用 ::ng-deep 是否是一个好的做法，但还要确保您使用了额外的唯一 css 选择器，以便它仅适用于您所针对的子组件？
或者有没有更合适的方式为特定的子组件实例添加样式？
解决方法
::ng-deep 本身确实使样式全局化，但与 :host 结合使用时可能会满足您的需求，但正如@eldar 用 this link 所暗示的那样，::ng-deep 是已弃用（并且已经有一段时间了）。
:ng-deep 是全局的。无论你把它放在哪里，它都适用于所有组件。不仅仅是孩子。
如果您使用 :host :ng-deep，那么它将从该组件向下运行（进入子组件、孙组件等）。
使用 ng-deep 的主要问题是 Angular 中的样式是延迟加载的。因此，在某些情况下，您可以完美地查看站点，然后查看使用 ng-deep 的特定页面，然后您可以返回到以前的页面，这些页面现在很好，因为应用了 ng-deep 样式站点宽的。前任。 https://tutorialsforangular.com/2020/04/13/the-dangers-of-ng-deep-bleeding/
一般来说，如果我需要根据放置的位置稍微不同地设置子组件的样式，那么我会为子组件创建一个输入变量，让父组件设置它，然后在子组件 HTML 中的某个位置将其设置为一个类。然后子组件可以设置它认为合适的样式，而您不必破坏封装。