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

@Component（{

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

国家city.component.ts

@Component（{

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

国家fact.component.ts

@Component（{

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

阅读和教程：

我读过tutorial，所以我使用＆＃39;：host＆＃39;来更改/编辑父css;或者＆＃39;：host-context（.selector）.change-selector , but it doesn't say I can use the：host-context（）`在body或app-root级别。

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

在https://blog.angular-university.io/angular-host-context/中，它表示可以使用puseudo类在body级别进行选择，但它不起作用。我阅读了其他一些我无法找到该链接的文章，它说:host-context类似于带有选择器的:host，那么我只能选择我父母的课程而不是在身体层面。

Answer 1

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

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

以下示例将背景颜色样式应用于组件中内部的所有元素，前提是某些祖先元素具有CSS类主题光。

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

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

angular：我们如何从本地组件访问app-root中的类名？

1 个答案: