css - :host (body) not working in Angular

Question

我正在尝试弄清楚如何在 home.component.css 中编写 CSS，但它不起作用。

我试过了

:host-context(body) 
  { 
    background-color: #eee; 
  } 

还有

:host() body 
  { 
    background-color: #eee;
  } 

但不工作。

我可能做错了什么？

Answer 1

您既不能使用 :host 也不能使用 :host-context 在组件 View 之外设置元素样式。为此，您需要使用 ViewEncapsulation.None。

如果你想让 body 只有在加载 home 组件的路由时才有一些背景，你可以这样做。您可以创建一个包装器组件，它将使用 ViewEncapsulation.None 为主体设置样式，它将 home.component 放在里面，这样 HomeComponent 的样式仍然封装在 中主页组件。

@Component({
   encapsulation: ViewEncapsulation.None,
   template: `<home-component>...`,
   styles: [`body { background-color: #eee; }...`]
})
export class WrapperComponent {}

routes = [
   {
       path: 'home',
       component: WrapperComponent