Angular 从grand child访问父css

考虑以下情况：

app.component.html

<app-header></app-header>
<div class="theme">
  <router-outlet></router-outlet>
</div>

<div class="just-test">Hello mate</div>

现在，当组件孙子.component.html（

App component的孙子

）将通过路由加载时（孙子的父组件实际上是加载的并且包含孙子的组件），它似乎无法访问类

“just test”

孙子.component.html

<app-header></app-header>
<div class="theme">
  <router-outlet></router-outlet>
</div>

<div class="just-test">Hello mate</div>

你好，伙计

---

是否可以访问“只需测试”以及如何访问？

否。因为每个组件都封装了css。请看这里：

---

但是，您可以在应用程序根文件夹的style.scss（或style.css）中设置此规则。这些组件没有封装。

没有。因为每个组件都封装了其css。请看这里：

---

但是，您可以在应用程序根文件夹的style.scss（或style.css）中设置此规则。这些没有封装。

您可以使用

:host/deep/。只需在
孙子.component.scss中测试{…}

应用于该类的任何规则都将覆盖原始类定义。
您可以使用
:host/deep/。只需在
孙子.component.scss中测试{…}

应用于该组件的任何规则都将覆盖原始类定义。
：host/deep/用于允许设置子组件的样式，而不是使用父组件的选择器。此外，/deep/选择器已不推荐使用。您可以在这里了解更多信息：我不了解子样式部分，但关于弃用，尽管这是事实，但有几种情况下/deep/是唯一的函数语法。因为您说过他可以在
孙子.component.scs
中使用
：host/deep/
；他希望在父级中定义规则，在本例中，app.component.css:host/deep/用于允许设置子组件的样式，而不是使用来自父级的选择器。此外，/deep/选择器已不推荐使用。您可以在这里了解更多信息：我不了解子样式部分，但关于弃用，尽管这是事实，但有几种情况下/deep/是唯一的函数语法。因为您说过他可以在
孙子.component.scs
中使用
：host/deep/
；他想在父级中定义规则，在本例中是app.component.css