::ng-deep 的范围是什么？

Question

我们网站的很多结构都是这样的：

• 组件
  • 组件 CSS
  • 组件模板
    • 子组件

我们经常需要根据子组件所在的父组件来设置不同的样式。这当然很烦人，但是当我们使用全局 CSS 时是可以管理的，因为我们可以简单地针对具有唯一 ID 和类的特定实例CSS 选择器。

我们现在正试图停止使用全局样式并将我们的 CSS 封装在每个组件中。问题在于，据我所见，封装 Angular CSS 将限定您的 CSS，使其仅适用于该组件……这意味着它也不适用于任何子组件。

一种解决方案似乎是在我们的组件 CSS 中使用 ::ng-deep 选择器来定位子级。不过，这遇到了一些阻力，因为有人告诉我，这通常也会破坏封装，并可能影响不同组件中网站的其他部分。

这就是我感到困惑的地方。一些问题：

是否有任何以::ng-deep 为目标的样式被取消作用域以便它是全局应用程序范围的？或者它只是在那个父组件中的“全局”？

如果是前者，仍然使用 ::ng-deep 是否可行，但还要确保使用额外的唯一 css 选择器，使其仅适用于您所定位的子组件？

或者有没有更合适的方式给特定的子组件实例添加样式？

Answer 1

: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 中的某个位置将其设为类。然后，子组件可以设置该类的样式，使其看起来合适，而您不必破坏封装。

Answer 2

::ng-deep 本身确实使样式全局化，但是当与:host 结合使用时可能会满足您的需要，但正如@eldar 与this link 所暗示的那样，::ng-deep 已被弃用（并且已经有一段时间了)。