angular：如何从本地组件访问应用程序根目录中的类名？

Question

我有三个主页和多个子页面，每个子页面都从父CSS继承其样式。

country.routes.ts

 ...
 path: '',
 children: [
    { 
      path: '/country', 
      component: CountryComponent, 
      data: {
        cssClass: 'country',
      },
    },
    { 
      path: ':countryId/city', 
      component: CityComponent ,
      data: {
        cssClass: 'country-city',
      },
    },
    {
      path: ':countryId/fact', 
      component: FactComponent,
      data: {
        cssClass: 'country-fact',
      },
    },
...

像这样，将CSS类插入到app-root下的div中

index.html（只是粗略的html表示形式）

<app-root>
 <div clas="country/country-fact/country-city">
  <header></header>
  <div>
   <route-outlet>
    <main>
     <!-- content -->
    </main>
   </route-outlet>
  </div>
  <footer></footer>
 </div>
</app-root>

在main.scss中（全局样式）

country {
  background-color:red;
}
country-city {
  background-color:blue;
}
.country-fact {
  background-color: purple;
}

因为这是有角度的，所以我想利用视图封装并在组件声明器中声明样式

country.component.ts

@零件（{

 ...
 styles: ['
  :host-context(.country) main{
    background-color:red;
 ','
   :host-context(.country) header{
     display:none;
    }
 '],

国家city.component.ts

@零件（{

 ...
 styles: ['
  :host-context(.country-city) main{
    background-color:blue;
 '],

国家fact.component.ts

@零件（{

 ...
 styles: ['
  :host-context(.country) main{
    background-color:purple;
 '],

通过阅读和教程：

我阅读了本教程 ，因此我通过使用'：host'或'：host-context（.selector）.change-selector来更改/编辑父级的CSS , but it doesn't say I can use the ：host-context（）在主体或应用程序根目录级别上。

我尝试了嵌套:host或`：host {：host-context（）}，但是都失败了。

在https://blog.angular-university.io/angular-host-context/中 ，它说可以在主体级别使用puseudo类进行选择，但它不起作用。 我读了一些其他文章，但找不到链接，它说:host-context类似于:host ，带有选择器，然后我只能选择父级的类，而不能在主体级选择。

Answer 1

问题是main元素不是您要向其应用样式的组件的一部分

通过阅读host-context的官方文档（ https://angular.io/guide/component-styles#host-context ），您只能根据组件外部的某些条件将CSS样式应用于组件内部的元素

以下示例仅在某些祖先元素具有CSS类theme-light的情况下，将背景颜色样式应用于组件内的所有元素。

:host-context(.theme-light) h2 {
  background-color: #eef;
}

因此，要实现您要执行的操作，您需要在具有main标签的组件内设置这些样式，或者在您的国家/地区组件内具有main标签，或者更改规则以在国家/地区组件内定位某个元素（而不是main标签）